jQuery and Google Maps with KML

Posted June 13, 2009 * Comments(4)

Marc Grabanski has written a great tutorial on how to spice up Google Maps using JQuery. What I have done is a slight variation of his tutorial.

Instead of placing ten random markers on the map, we will generate driving directions from point A to B and use the KML data from Google Maps to render the markers.
Appending “&output=kml”, Google Maps will return a KML document which we can then parse to get the marker information.

var geoXml;
var urlKML = "http://maps.google.com/maps?saddr=";
urlKML += fromAddress.val();
urlKML += "&daddr=";
urlKML += toAddress.val();
urlKML += "&output=kml";
geoXml = new GGeoXml(urlKML);

We can now create an XMLDOM object using the KML and parse the nodes to get all the marker coordinates and its description.

var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = false;
doc.load(urlKML);
if (doc.parseError.errorCode != '0') {
errordiv.innerHTML = "Error generating KML! Probably an invalid address...";
return false;
} else errordiv.innerHTML = "";
var coords = doc.documentElement.selectNodes("Document/Placemark/Point/coordinates");
var places = doc.documentElement.selectNodes("Document/Placemark/name");

We can now loop through each and add the markers to the map.

for (var i = 0; i < coords.length; i++) {
var pts = [];
pts = coords[i].text.replace(",0", "").split(",");
var point = new GLatLng(pts[1], pts[0]);
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}

And append the description to each marker using the .html property:

$(markers).each(function(i, marker) {
$("<li />")
.html(places[i].text)
.click(function() {
displayPoint(marker, i);
});
GEvent.addListener(marker, "click", function() {
displayPoint(marker, i);
$("#myInfoWindow")
.html(places[i].text)
});
});

You can view the final demo here.
Its still work-in-progress so feel free to chime in with your suggestions. Next I am going to add to the map are lines connecting the markers with each other.

Related Posts

4 Comments so far

  1. O'Seamus on January 28th, 2010

    Hey,
    your maps are gorgeous:)
    I’m wondering, is there any possibility to anchor the markers to simple “a href” links with or without jQery? I use this example with “li”-s, but how can I make such markers that I can grab one by one (like links), not just list elements together? special IDs to each? or IDs to each wrapping div-s?

  2. Joey on February 6th, 2010

    Hey,

    Great idea. I came to your website after i saw your link posted on Marcgrabanski.com. I was very impressed by his tutorial and result, but i was disappointed that he used random markers, instead of actual pre-defined ones.

    An integration like this one, that is capable of showing directions in html, could be amazing in this website that i’m developing.

    I visited your demo however and it doesnt seem to work.. No markers showed up and when i clicked on submit, nothing happened.. is it me? or my browser?

    Joey

  3. M on February 15th, 2010

    Hello Joey,

    I think it has to do with your Internet Settings. Google.com and SandboxM.com both domains may not be part of your Trusted Sites and thats why IE8 is not allowing you to download the XML from a 3rd-party site (google.com). I tested the page using IE7 and since I wrote this tutorial back in June, its been a while.

    I will investigate further and let you know. Check back soon!

    M

  4. M on March 3rd, 2010

    Joey,

    Here’s what you can do in the meantime:
    Download the HTML\Javascript and run it at http://localhost using IIS on your own machine.

    And let me know how that goes.

    M

Leave a reply