Plot points using Google Maps API - Part 2

By Tom Fitzgerald on December 29, 2008 11:25 AM | No Comments

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, Grasonville, MD 21638" lat="39.119173" lng="-76.614295"/>
<marker address="435 Easy street, Chester, MD 21619" lat="38.951795" lng="-76.529299"/>

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

Here is the relevant code that we'll be looking at. We use the Google function GDownloadUrl to open our XML file. The output is directly passed to the adjorning function with the variable 'doc'. We then use GXml to parse the downloaded file 'doc', that is saved as xmlDoc. We then read the elements named 'marker' which is in this case our entire file, that is saved as 'marker'.

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);
map.addOverlay(marker);
}

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.

Here is this example live so you can see it work and view the full source.

Categories:

Tags:

Search