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 blogged recently with a simple script for adding a Google map onto your site. I’ve since written an enhanced PHP script, so thought I’d share it.

First of all, you’ll need to download the following 2 PHP scripts…

map_head.php map_head.php

map_main.php map_main.php

The first file must be added into the HEAD section of your HTML in the following way…

<?php
include('map_head.php?key=xxx');
?>

You need to replace xxx with your Google Maps API key.

Now, in the BODY of your code, where you wish the map to appear you will need the following code…

<?php
$width="700px";
$height="400px";
$border_col="#808080";
$options="1YYY";
$xcoord="-1.218501";
$ycoord="52.927571";
$zoom="2";
$popup="Name Here<br/>Address Here<br/>Another line<br/>Another line";
include('map_main.php');
?>

Replace $width and $height with the size that you require the map to be. $border_col is the colour that you want the map border to be. $xcoord and $ycoord is the, you guessed it, x and y co-ordinates of where you want the map pin (and the centre of the map) to go. $zoom is the starting zoom level. $popup is the contents of the popup message that appears next to your pin – lines should be separated by the <br/> command.

Finally, $options indicates whether certain options are in use or not. Use “N” to switch off any of these.

The first flag is a number between 1 and 3. Depending on which it is, the following map option is switched on…

  1. GLargeMapControl – a large pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
  2. GSmallMapControl – a smaller pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
  3. GSmallZoomControl – a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.

The second flag should be set to Y to be switched on and displays the map scale.

The third flag should be set to Y to be switched on and displays buttons that let the user toggle between map types (such as Map and Satellite).

The final flag should be set to Y to be switched on and displays a collapsible overview map in the corner of the screen.

Now, the code I’ve supplied has no error checking in it, so supplying the wrong parameters will give unpredictable results. Or it will just break.

If you have any problems or questions about it, feel free to contact me.