Postcodes to Google Maps on your website
In past projects I’ve used MultiMap links to give directions and maps to postcodes but for a new part of the Medicology site I wanted to embed maps within the webpage. As MultiMap don’t let you do this within charging I went in search of a free solution and came up with Google Maps.
Using the default Google Maps API you can only include maps based on longitude and latitude and not on a UK postcode. After a bit of searching I found a brilliant blog post on Tom Anthony’s site that shows you how to use a few JavaScript functions to center the map on a postcode and then place a marker there as well. After following the tutorial I got the map in place but I wanted to extend it so that as the page loads it automatically centers on the postcode and places the marker there.
To keep the code clean I put the map in an iFrame and the only PHP involved is to output the postcode into the page as a JavaScript variable. The rest is done purely through JavaScript and the Google Maps API. You can see it at the Medicology Venue pages. If you want to use it, go view the page source and save the JavaScript file. It’s easy enough to implement on your own site. Job done!
Glad the tutorial was helpful. Nice job with the extension for auto centering; I’ll send people asking over here when they ask!
Great site.
Thanks Tom,
Just glad I didn’t have to code it from sctratch!
Andy, the script looks great but i cant quite suss it out, the page within the iframe has allready parsed the variable needed to call the post code infor from the js file.
from what i can tel the js script changd the postcode into lat:long and its that that neds to be called.
”
thisPostcode = ‘52.488294,-1.890979′
”
this is the bit im struggling with, what is the correct call for in here?
thanks
Nick
Exactly the same for me. I came here hoping you may have solved the very issue I have, but it seems as nick wrote. Did you convert the code since this artical was written or have we misunderstood your intent?