KML in Google Maps and Earth
Tuesday, 31 August 2010
Article Index
KML in Google Maps and Earth
Maps and the MAP API
Earth and its extensions

KML is the way to code geographic data so that it can be displayed on a map. In this article we look at how KML works, how to use it in both Google Maps and Google Earth, and how to work with it in code.

 

In Getting started with Google Maps we looked at how to add a map into a web page using Google Maps and nothing but Javascript and a few bits of HTML that mostly didn't do anything other than set up the page. In the rest of this article it is assumed that you know how to set up a web page that creates a Google Maps or a Google Earth object that a script can work with - Getting started with Google Earth is an I Programmer article that will be published very soon.

You can create almost any mapping facility you like using nothing but code but Google Maps and Google Earth support another way of doing the same job - KML or Keyhole Markup language. In case you are wondering why its "Keyhole" rather than "Mapping" or some other more relevant word the simple reason is that its in homage to the pioneering KH or Keyhole reconnaissance satellites.

The basic idea is that KML is a dialect of XML  used to describe locations or more generally the sorts of things you might want to add to a map display. Its a sort of HTML for places and geographic locations. You can use it to arrange data in a format that applications such as Google Maps and Earth can understand and use to create graphical displays as the correct location on a map.

For example, in the previous article we discovered how to place default marker in Google Maps at a given location using Javascript:

marker1 = new google.maps.Marker({
position:new google.maps.LatLng(55, -1.5),
map: map
});

The same thing can be achieved using KML and it works in both Maps and Earth:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Placemark>
 <Point>
 <coordinates>
-1.5,55
</coordinates>
 </Point>
 </Placemark>
</kml>

You should be able to understand the way that the KML file is organised. If you don't follow any of it then read the tutorial on XML.  However the principles are fairly obvious. The file always starts with the first two lines which identify the file as a dialect of XML and using the Google extensions to KML. After these two lines there are a list of nested tags.

Each tag like <Placemark> has a closing tag like </Placemark> and other tag pairs are placed between them to refine the definition. A <Placemark> is a basic location on a map and you can use lots of other tags within it to specify the location and how it is displayed. In this case we simply use the <Point> tag to give longitude and latitude within a pair of <coordinates> tags.

A common example

There are lots of tags that defined lots of different things and the art of using KML is simply discovering what tags do what and then making use of them.

Obviously there are lots and lots of KML features that we could cover in this article but it make more sense to focus on the most commonly used techniques. The most common is to use a custom icon for the Placemark so lets see how this is done and add some additional tags:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>My Markers</name>
<Placemark>
<name>My Marker</name>
<description>
My Marker description
</description>
<Style>
<IconStyle>
<Icon>
<href>
http://www.i-programmer.info/
maps/IP.png
</href>
</Icon>
</IconStyle>
</Style>
<Point>
<coordinates>-1.5,55</coordinates>
</Point>
</Placemark>  
</Document>
</kml>

If you examine the example you should be able to work out what everything is doing.  The <Document> tag can be used to group multiple items together - that is you can place multiple Placemark items in the single KML file. In this case it isn't necessary because there is only a single Placemark. The first <Name> tag assigns a name to the entire document, the second names the Placemark. The only complicated section is the <Style> tag which is used to group everything that relates to the way that the Placemark displays. In this case the only modification to the default style is to supply a custom icon. The <IconStyle> tag is the section that contains tags that set the icon's style but in this case the only thing we want to change is the icon itself and this is done by specifying a URL where the file is stored. You can use local files in this case and you can also zip the graphic into the XMZ file and it will be correctly extracted and loaded.

The file is available at

http://www.i-programmer.info/maps/demo2.kml

along with graphics file and when loaded into a map it displays as below:

demo2

 


Our next problem is how exactly to display a KML file.

<ASIN:1934356069>

<ASIN:1593272715>

<ASIN:1441942068>

<ASIN:0470381248>

<ASIN:0321559673>

<ASIN:0470095288>



Last Updated ( Tuesday, 31 August 2010 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.