How can I move a map saved on Google Earth (.kml file) to a website using the Google Maps API?

December 7, 2005 3:14 PM

How can I export a map from Google Earth to a website using the Google Maps API?

I've plotted my worldly travels in GoogleEarth and would like to do the same on a website using Google Maps. I figure saving as KML is a good start, but I'm not sure what the next step is. Thanks for the help!

posted by JudgeBork to computers & internet (6 comments total)

First you'll need a GoogleMaps developer's license to link to their API script in your web page. The actual format for generating a map is very, very simple. Basically a bunch of x-y coordinate tags. If you can export those from Google Earth, you're golden.

The basic code for generating the map is located inside the body.onload function:

function onLoad() {
   var map = new GMap(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.centerAndZoom(new GPoint(2.308588,48.873804), 3);
   map.setMapType( _SATELLITE_TYPE );

The first line creates the map in the DIV holder called "map". The second line adds the zoom controls. The third line is where the map is centered (longitude and latitude) and how much it's zoomed in (level 3). The fourth line tells the map to start with the satellite map. You can change these to whatever you like. Check out the full Google Maps documentation for more information.

To create markers, use this function:
function createMarker(point, marktext) {
   var marker = new GMarker(point);
   var html = marktext;
   GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
});
   return marker;
}

Now you just need to load up all your points:

var markers = [];
var points = [];
points.push(new GPoint( 2.271252,48.869450));
points.push(new GPoint( 2.274277,48.871229));
points.push(new GPoint( 2.275103,48.871102));

markers.push(createMarker(points[0], "First point"));
markers.push(createMarker(points[1], "Second point"));
markers.push(createMarker(points[2], "Third point"));

Finally, add the markers as overlays to the map:

for (x=0; x < markers.length; x++) {br>    map.addOverlay(markers[x]);
}

Then, just place somewhere inside the BODY part of your html a div called 'map' (you can call it whatever you like, of course).

<div id="map" style="width:600px; height: 500px;"></div>

You can view the HTML source code in my "rendezvous" map for a simple example.
posted by Civil_Disobedient at 4:13 PM on December 7, 2005

Argh, looks like that last procedure got screwed up:

for (x=0; x < markers.length; x++) {br>    map.addOverlay(markers[x]);
}
posted by Civil_Disobedient at 4:14 PM on December 7, 2005

DAMMIT. Just forget the "br>" part.
posted by Civil_Disobedient at 4:14 PM on December 7, 2005

Took a quick look at the KML file format. It's basic XML node structure, with the placemarks' longitude and latitude enclosed in the < / point> tags. Go through the KML file and cut the POINTS coordinates and paste them into the structure I provided above (the "new Gpoint" part) and it should work fine.
posted by Civil_Disobedient at 4:27 PM on December 7, 2005

If you wanted to get extra-fancy, you could write a script that combed through the KML file automatically for the points and automatically inserted them into the array.

If this all sounds like gobldygook to you, let me know.
posted by Civil_Disobedient at 4:29 PM on December 7, 2005

You could transform your KML to GPX, then use the Google Maps GPX viewer.
posted by scruss at 6:38 PM on December 7, 2005