Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

Google Maps and Gossamer Links

Quote Reply
Google Maps and Gossamer Links
http://www.boston-online.com/boston24/ shows a map of 24-hour stores in Boston that is populated by GLinks and the PageBuilder plug-in. Here are the basics:

First, get a Google Maps API key at http://www.google.com/apis/maps/ - it's free, but each key is good only for a specific directory (so if you get a key for www.site.com/, the key will only work for pages in the root directory, not for, say, something in www.site.com/dir/). You'll find background info and a discussion group there as well.

Take a look at the source code for my page and you'll see a bunch of JavaScript that grabs a Google map centered on a specific latitude and longitude (in my case, Boston), defines what the "pushpins" will look like, what data to populate the "pop-up" boxes with (click on one of the locations on the map and you'll see info about the location, including a couple of GLinks reviews links). I am no JavaScript coder; I adapted the JavaScript from a nice hockey map at http://www.chadcwaters.com/hockeymap/. Toward the bottom of the source code, you'll see references to a bunch of XML files. These are the key to integrating the maps with GLinks:

First in GLinks, I added fields to the links table for street address, longitude and latitude. The former is so users can add in the address; the latter two are so I can look up the longitude and latitude of sites on www.geocoder.us (if you know your Perl, there's a Perl geocoder module that can do this on the fly; alas, I don't know my perl). In the category table, I added a field called is_allnight with values of either Yes or No.

OK, so with that info in the database, I created two new templates. One is a variant of link.html (I called it link-24hour.html) that looks like this:

Code:
<%Links::Utils::load_reviews%><place
placeName="<%Title%>"
ID="<%ID%>"
placeComments="<%Review_Count%> comments<%endif%>"
placeURL=""
latitude="<%latitude%>"
longitude="<%longitude%>"
street="<%address%>"
city="<%city%>"
/>

Then I created a PageBuilder template that looks like this:

Code:
<?xml version="1.0" ?>
<placeData>
<%loop links_loop%>
<%include link-24hour.html%>
<%endloop%>
</placeData>

I gave it a condition of is_allnight = Yes so that it only builds XML pages for the categories that actually need them. I set the extension of the files to .xml, and had them built in the main Boston 24 directory."

In my main category template, I added an "if" tag to embed the map on the appropriate category page (big caveat: The map is called by a div; it doesn't seem to like being wrapped in other divs, so this can make things very interesting if you use divs instead of tables)

Finally, I hand-coded the JavaScript to call the .xml files (hmm, I could probably get GLinks to build the list of files). So, somebody adds a new all-night pharmacy or whatever to Gossamer Links, I rebuild the site and voila, the map is updated.

Last edited by:

agaffin: Aug 21, 2005, 9:24 PM