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

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

JudgeBork — Wed, 07 Dec 2005 15:14:41 -0800

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!

By: Civil_Disobedient

Civil_Disobedient — Wed, 07 Dec 2005 16:13:01 -0800

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.

By: Civil_Disobedient

Civil_Disobedient — Wed, 07 Dec 2005 16:14:06 -0800

Argh, looks like that last procedure got screwed up:

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

By: Civil_Disobedient

Civil_Disobedient — Wed, 07 Dec 2005 16:14:24 -0800

DAMMIT. Just forget the "br>" part.

By: Civil_Disobedient

Civil_Disobedient — Wed, 07 Dec 2005 16:27:38 -0800

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.

By: Civil_Disobedient

Civil_Disobedient — Wed, 07 Dec 2005 16:29:29 -0800

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.

By: scruss

scruss — Wed, 07 Dec 2005 18:38:49 -0800

You could transform your KML to GPX, then use the Google Maps GPX viewer.