Plot points using Google Maps API

In this tutorial I wanted to go over how to take raw data from just about any source and then plot the points on a Google map. This process can be done in any number of ways, I know myself I have done a little differently each time - mainly due to constraints or a customers request. In this particular request I had very limited time. I was asked to take data from their client management system and then place it on a Google map. Let's see how we should start such a process.


In this tutorial I wanted to go over how to take raw data from just about any source and then plot the points on a Google map. This process can be done in any number of ways, I know myself I have done a little differently each time - mainly due to constraints or a customers request. In this particular request I had very limited time. I was asked to take data from their client management system and then place it on a Google map. Let's see how we should start such a process.

Planning (Feel free to skip this part)

Yes that's right, even if you don't do much of it you have to start with some sort of planning. Lack of doing so will no doubt cause you trouble down the road. In this case I already had the data exported into CSV format. I know from there somehow we must geocode (convert the addresses into mapable latitude / longitude coordinates). First things first, I put my CSV into Excel then into an Access (Yea I know) database. So now what? Well once we have our data we must then geocode the addresses then plot them on a map. In this case I used a PHP file to output all my addresses in XML. The JavaScript calls that using GDownloadURL then geocodes each address and outputs it to the browser. Then you just have to save that in a file for your map program to plot it. In my particular case I already had another JavaScript page already written that could accept an XML file and plot the points so I used that.

I really should have just one JavaScript app to both request the data, geocode then display the points on the map. I just didn't have the time to do all that. I suppose the right way would have PHP comunicate with JavaScript by having JavaScript query PHP for all addresses. Once each one is geocoded send it back to PHP using XML or JSON. PHP would then write the latitude longitude to the database. Next time the script is ran JavaScript would query PHP and this time find all the addresses geocoded and just skip that step and plot them. Anyway in my example we are just mass geocoding.

What is the best way to geocode a bunch of addresses?

Short answer: I put all the address in a XML file then loop over using JavaScript

Long answer:

You'll note that I decided to loop over using the GClientGeocoder class. However lets take a note from Google's reference page about that class.
This class is used to communicate directly with Google servers to obtain geocodes for user specified addresses. In addition, a geocoder maintains its own cache of addresses, which allows repeated queries to be answered without a round trip to the server. As a general best practice, it is not recommended to use GClientGeocoder functions in a loop. Developers that have multiple addresses to geocode should probably use our HTTP Geocoder instead.

Google says in not recommended to use this class to loop over? There are limits on both the JavaScript class and the HTTP geocoder. Its true that the HTTP geocoder has less strict limits. In my particular case I needed 2000 addresses geocoded. Simply put using HTTP just wasn't an option because PHP and my web server would both time out. Yes, I increased the timeout on both however I still get the error because I use a custom http wrapper. So in my experience the JavaScript class is faster so that's what we'll use in this tutorial.

So we are using XML data to feed into the following JavaScript file. If your source is CSV you would simply change into XML format. Here is what my XML looks like 

My source XML file:

 




Stepping through the source line by line

Here is our source. I'll heavily comment it so you can get a good understand on what everything does.

 
// nextAddress function is called once Google is loaded and ready to go 
// that'll get everything started

// Outputs basic XML header     


That's it! It also should be noted I got some of this source from http://www.commchurch.freeserve.co.uk the tutorials there are really great and I suggest everyone take a look at them.

Ok so now we have our JavaScript source. I'm pretty tired now so I'm going to call it a night. Stay tuned and I'll show you the PHP file used for the XML and also the final step - the map program.

Popular posts from this blog

How to create a Chrome Extension

Connect to Gmail with Apps Script