Plot points using Google Maps API - Part 2

Hey everyone! Sorry for the delay in posting this. It’s been a busy time lately. I’m spending half my time in New York which means I’m more than double behind. Anyway I previously wrote about how to quickly geocode a bunch of addresses using JavaScript. Then I would copy and paste those results into a new file that I named clients.xml. Warning : this is pretty inefficient I must say. If a new addresses was added you would have to go back and geocode all of them then copy and paste into clients.xml. I know this isn’t the best practice. The real answer would be to have a PHP script geocode an address and write into a database. However in the beginning I had 1000 addresses to geocode and not a lot of time to write an application. So this is really me just doing a quick mash up.

This example I use the following method to plot my points.

  • All addresses are already geocoded in my clients.xml file - (See part one to see how I mass geocoded the addresses to get them in there.)
  • Use GDownloadUrl to open clients.xml via AJAX
  • Loop over each entry and add to map
Ok so our clients.xml file should look something like this (I'm just posting a few lines).
<marker address="123 Dundee Drive" lat="39.119173" lng="-76.6142>
<marker address="38 Main Street" lat="39.119173" lng="-76.6142>
Easy enough, got the address and the cords that's all we need. Note: Again I am guilty for not putting enough information, I really should have put the persons name, etc.

GDownloadUrl - from XML to our Map

GDownloadUrl("clients.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");

Loop It

We now do a loop over all the markers returned. This will loop over every address we have geocoded. You can see we use getAttribute to extract the latitude and longitude values from the markers. They are extracted then saved to point using the GLatLng function. You can see also I extract the attribute for 'html' and 'label'. In my example I never put any values into these attributes. I would recommend that you do so. You could put in the persons name or whatever information you need.
for (var i = 0; i < markers.length; i++) {

// obtain the attribues of each marker

    var lat = parseFloat(markers[i].getAttribute("lat"));
    var lng = parseFloat(markers[i].getAttribute("lng"));
    var point = new GLatLng(lat,lng);
    var html = markers[i].getAttribute("html");
    var label = markers[i].getAttribute("label");

// create the marker

    var marker = createMarker(point,label,html);
So really that's it! The hard work of geocoding was already done in my last example, then I saved it to XML, now this map just loops over the XML file and displays it. If anyone has any questions about pretty much anything relating to Google's Map API please post a comment. In the future I'll do more tutorials and probably some videos.

Popular posts from this blog

How to create a Chrome Extension

Connect to Gmail with Apps Script