Due to updates, over time, that have been made to the site and the age of this article, this post may not display correctly. In particular images may be missing or product reviews display incorrectly.

If this is the case and you'd particularly like me to fix it, then please reach out to me on Twitter.

I regularly make use of the Google Maps API to add interactive maps to my websites, where a location is required to be pin-pointed. It’s used on both BMTG and Engments to good effect.

It’s my own variation of the code and actively displays a pin in the required location, along with a balloon containing the locations name and address. Here is an example of the code…

<div id="map" style="width: 700px; height: 400px; border-width: 1px; border-style: solid; border-color: #808080;"></div>
<script type="text/javascript" defer="defer">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-1.218501, 52.927571), 2);
var pinEngments = new GMarker(new GPoint(-1.218501, 52.927571));
map.addOverlay(pinEngments);
var msgEngments = "<div style='width:200px;'>Round Hill Primary School.<br>Foster Avenue,<br>Beeston,<br>Nottingham.<br>NG9 1AE.</div>";
pinEngments.openInfoWindowHtml(msgEngments);
//]]>
</script>

The example code shows the location of Roundhill School from the BMTG website, although you can see some of the code is left-over from using it on the Engments site.

  • The DIV sets up a coloured border and defines the height and width of the map.
  • The “map.centerAndZoom” line supplies the co-ordinates (which you can get from Google Maps or Google Earth) of the centre of the map. The “2” at the end is the zoom level.
  • The “var pinEngments” line is the co-ordinates of the pin (as you can see the pin is set as the location of the map).
  • The “var msgEngments” line is then some code which displays the location and address within a DIV statement.
  • The “map.addControl” lines adds the control panel which allows for the zooming, etc. This can be omitted for removal, or changed to other, smaller, controls.

And that’s it. Don’t forget to put your Google API at the beginning of the page or this won’t work.