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:
- 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.
- Print out a JavaScript data structure that contains all the information for the markers and then iterate over that data structure in JavaScript.
- 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.
- 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?
August 26, 2009 at 2:32 pm
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.
August 26, 2009 at 2:38 pm
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.
August 26, 2009 at 3:04 pm
“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
August 26, 2009 at 3:04 pm
Single newlines don’t work in comments, double newlines do.
August 26, 2009 at 8:00 pm
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
August 30, 2009 at 1:03 pm
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
August 31, 2009 at 5:13 pm
Good post. I’ll try using this soon.