Customizing Google Maps - Part I - Adding Data to Google Maps
*Editor’s Note: I’ve updated this post a bit. In yet another show of how powerful I’ve become, after I made a comment about the Google Maps API not using KML, Google changed the API to incorporate both KML and GeoRSS five days later. Of course, one might argue they already had that in the works for a long time, that the number of people that read this blog could stand on the head of a pin, and that the timing was obviously fortuitous. The one that might argue those things, however, is not the one writing this post. Roar.
I’ve steered away from doing Google Maps and Google Earth tutorials as a general rule for two reasons - there are enough of them online already to choke a pony, and pretty much everybody that has a need to make custom Google maps has already made custom Google maps. I will probably be participating in creating a workshop that will talk about this topic, however, so, being ever efficiency-minded (read: lazy), I’m going to write several very basic posts on customizing Google Maps, and then a couple on customizing Google Earth. Two birds and a rock and all that.
Here’s how I’m going to work this:
Part I - Adding Data to Google Maps
Part II - Converting Data to KML
Part III - Customizing the Google Maps API
Part IV - Customizing the Google Maps API Part Du
Part V - Adding Data to Google Earth
By creating an outline, I am almost guaranteeing I will not address those things in any such way or order, but I like outlines. They give structure to the things I probably won’t get around to doing.
To add your own custom data to Google Maps, you need to create a KML file. KML is the Keyhole Markup Language, an XML schema to describe data to put in Google Maps or Google Earth. Here’s a simple example with the CNN Tower:
<?xml version=”1.0” encoding=”UTF-8”?>
<kml xmlns=”http://earth.google.com/kml/2.1">
<Placemark>
<name>CNN Tower</name>
<description>Example of a site in KML.</description>
<Point>
<coordinates>-79.386848,43.642426</coordinates>
</Point>
</Placemark>
</kml>
As you can see, this isn’t brain-poundingly difficult. KML makes for a fairly human-readable file format, and things are what they look like. Note those aren’t state plane coordinates - Google Maps and Google Earth expect decimal degrees (WGS1984) and won’t take kindly to anything else you care to give it. We’ll go over a couple of ways to convert your GIS data to KML in the next post in this series.
If you were to call this file “my.kml” and toss it in the root of your web server, you could show that data on Google Maps by going to:
http://maps.google.com/maps?f=q&h1-en&q=http://your.server.name/my.kml
I put that file on one of our web servers just so you can see it in action here.
If all you need to do is show a bunch of points indicating your favorite taverns or whatnot, this is all you need. Make a KML file with your locations, host on a free hosting site like Google Pages or whatnot, and be done with it. You’ll be able to send that link to anyone that needs to see your locations, and any update you make to your KML file will appear the next time they go to the site.
What about those other nice geometric features, like lines and polygons? Well, you can add those too, but you can’t link data to them. In other words, you’re not going to get a nice pop-up when you click on a line or polygon with data. But you can add them. Here’s an example of a line (what Google calls a path):
<?xml version=”1.0” encoding=”UTF-8”?>
<kml xmlns=”http://earth.google.com/kml/2.1"> <Document>
<name>Paths</name>
<description>Examples of paths. Note that the tessellate tag is by default
set to 0. If you want to create tessellated lines, they must be authored
(or edited) directly in KML.</description> <Style id=”yellowLineGreenPoly”>
<LineStyle>
<color>7f00ffff</color>
<width>4</width>
</LineStyle>
<PolyStyle>
<color>7f00ff00</color>
</PolyStyle>
</Style> <Placemark>
<name>Absolute Extruded</name>
<description>Transparent green wall with yellow outlines</description>
<styleUrl>#yellowLineGreenPoly</styleUrl>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>absolute</altitudeMode>
<coordinates> -112.2550785337791,36.07954952145647,2357
-112.2549277039738,36.08117083492122,2357
-112.2552505069063,36.08260761307279,2357
-112.2564540158376,36.08395660588506,2357
-112.2580238976449,36.08511401044813,2357
-112.2595218489022,36.08584355239394,2357
-112.2608216347552,36.08612634548589,2357
-112.262073428656,36.08626019085147,2357
-112.2633204928495,36.08621519860091,2357
-112.2644963846444,36.08627897945274,2357
-112.2656969554589,36.08649599090644,2357 </coordinates>
</LineString> </Placemark>
</Document> </kml>
Now how about a polygon:
<?xml version=”1.0” encoding=”UTF-8”?>
<kml xmlns=”http://earth.google.com/kml/2.1">
<Placemark>
<name>The Pentagon</name>
<Polygon>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-77.05788457660967,38.87253259892824,100
-77.05465973756702,38.87291016281703,100
-77.05315536854791,38.87053267794386,100
-77.05552622493516,38.868757801256,100
-77.05844056290393,38.86996206506943,100
-77.05788457660967,38.87253259892824,100
</coordinates>
</LinearRing>
</outerBoundaryIs>
<innerBoundaryIs>
<LinearRing>
<coordinates>
-77.05668055019126,38.87154239798456,100
-77.05542625960818,38.87167890344077,100
-77.05485125901024,38.87076535397792,100
-77.05577677433152,38.87008686581446,100
<span style=”font-family
:verdana;”> -77.05691162017543,38.87054446963351,100
-77.05668055019126,38.87154239798456,100
</coordinates>
</LinearRing>
</innerBoundaryIs>
</Polygon>
</Placemark>
</kml>
You can see those examples here and here. The first is a path through the Grand Canyon, the second is an outline of the Pentagon. Both of those examples are on the KML web site.
And, of course, you can combine all types of geometric features as you wish. That comes in handy when trying to work around the no-data-behind-non-points bit: you can put a point in the middle of your polygon or on your line that contains the text data you want to express.
As you can see, KML is a fairly readable format and is easy to pick up on. Writing XML by hand, however, is for crazy people. In the next post in this series we’ll look at a couple of ways to convert GIS data to KML. Then we’ll go on to the really fun stuff, making your own Google Maps mashup with the Google Maps API.