rc3.org Rafe Colburn on software development (and other topics)

Storing data for Google Maps

I hinted at this in my link post, but I thought I’d write up the whole thing in hopes of discussing it. I have a page that will include a Google Map with markers for a number of locations (potentially a large number of markers). For an explanation of how to add markers to a Google Map, check out this page.

So the question is: how do you get the address data from my database to Google Maps?

The process is to geocode the address and then apply the marker to the map. There’s a simple example at that link.

Here are some possible approaches:

  1. Write some code (PHP in this case) that emits the JavaScript used to geocode the addresses and put the markers on the map. Unfortunately then you have a mixture of JavaScript and PHP code that looks a lot like JavaScript on your page.
  2. Print out a JavaScript data structure that contains all the information for the markers and then iterate over that data structure in JavaScript.
  3. Put the map data in hidden elements on the page where it can be extracted using JavaScript. The downside is you have hidden elements on your page. The upside is that your PHP is completely separated from your JavaScript.
  4. Create a service that returns a JSON data structure of the marker information that can be called using XmlHttpRequest and call that from the page. That offers a clean separation of the JavaScript from the PHP but unfortunately could add latency to the page.

I’ve done some searching to find out how people handle this problem, but haven’t seen any good answers yet. Any ideas?


7 Comments

4 is done just as simply by making a program that emits the JSON structure and including it in the page (either in a script tag or in a hidden element that you then parse as JSON). JSON is Javascript, remember.

That said the additional latency for one more request to the same server should not be terribly significant – I mean you’re dealing with Google Maps where the browser is about to download any number of map tiles and icons, one more request isn’t going to kill you.

The geocoding Javascript can & should be completely separate from the data it operates on, and I don’t see why it should need to be generated in PHP – it should be static.

Posted by Jacob Davies on 26 August 2009 @ 2pm

Yes, the code that geocodes the data can be completely separate as long as the data structure is elsewhere. Emitting the geocoding JavaScript is what I’ll call the “naive” approach.

Posted by Rafe on 26 August 2009 @ 2pm

“I almost wonder whether using AJAX is better than writing PHP that emits JavaScript.”

Do not write php that emits javascript. Write php that emits JSON. Number 4 is the way to go. Two things you need that are json specific: http://us3.php.net/json_encode http://www.json.org/json2.js

Posted by Wesley Walser on 26 August 2009 @ 3pm

Single newlines don’t work in comments, double newlines do.

Posted by Wesley Walser on 26 August 2009 @ 3pm

Perhaps I’m misunderstanding something, but geocoding each address everytime the page is loaded – as in the linked google example – is pretty expensive, and limited by google (http://code.google.com/apis/maps/faq.html#geocoder_limit)

Last time I had to do something like this I used #4 and the HTTP geocoding service (http://code.google.com/apis/maps/documentation/geocoding/index.html) to add lat/long and generate a static JSON file with all the required info

Posted by Anthony on 26 August 2009 @ 8pm

Rafe, you might be interested in this jQuery plugin my co-worker Brian Landau built for a recent project: http://github.com/vigetlabs/jmapping/tree/master

Posted by Jackson Fox on 30 August 2009 @ 1pm

Good post. I’ll try using this soon.

Posted by Jade Wood on 31 August 2009 @ 5pm

Leave a Comment