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!