Dynamic Google map using UK Postcode

[ffenton]

On one of my sites I have a list of stockists and wanted to display a Google map showing their location using their UK Postcode.

Using code from http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/ I have now achieved this. I thought some others might find it useful so here is what I did.

First you will need two keys. A Google Maps API key and an AJAX search key. You can get them here:

http://www.google.com/apis/maps/signup.html

http://code.google.com/apis/ajaxsearch/signup.html

Create a php file and do whatever you need to grab the postcode (i.e. query table in database) and then include the following:

Code:

<?php
//query database to retrieve postcode

//store postcode in variable
$postcode = mysql_result($result,0,"postcode");
?>
<!-- generate google map -->

<!-- google maps key -->    
 <script src="http://maps.google.com/maps?file=api&v=2&key=put_your_google_maps_key_here"
      type="text/javascript"></script>

<!-- ajax key -->        
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=put_your_ajax_key_here"
type="text/javascript"></script>    

<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);


function usePointFromPostcode(postcode, callbackFunction) {
   
    localSearch.setSearchCompleteCallback(null,
        function() {
           
            if (localSearch.results[0])
            {        
                var resultLat = localSearch.results[0].lat;
                var resultLng = localSearch.results[0].lng;
                var point = new GLatLng(resultLat,resultLng);
                callbackFunction(point);
            }else{
                alert("Postcode not found!");
            }
        });    
       
    localSearch.execute(postcode + ", UK");
}


function setCenterToPoint(point)
{
    map.setCenter(point, 17);
    var marker = new GMarker(point,icon);
    map.addOverlay(marker);
}


function mapLoad() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_NORMAL_MAP);
    }
}

<!-- This function may not be needed, I haven't tried removing it  -->
function addUnLoadEvent(func) {
    var oldonunload = window.onunload;
    if (typeof window.onunload != 'function') {
      window.onunload = func;
    } else {
      window.onunload = function() {
        oldonunload();
        func();
      }
    }
}

<!-- This call may not be necessary, I haven't tried removing it -->
addUnLoadEvent(GUnload);
   
</script>
   
<script>
     window.onload = function() {
     mapLoad();
     usePointFromPostcode("<?php echo $postcode; ?>", setCenterToPoint);
     }
</script>

<!-- use this div to size and position map -->
<div id="map" style="width: 500px; height: 500px; "></div>
       

You can save the above as e.g. map.php and then on a site page add a code section and call map.php using require_once('../../map.php');

The result is a normal map with a normal marker centered on the postcode location. The map includes zoom controls and is dragable. It also has map, hybrid and satellite buttons.

Anyway I hope someone finds it useful. It took me hours of googling and testing to find a solution and perhaps this will spare someone else the same pain.

[spacerace]

Thanks, this has indeed been very useful and saved me a lot of hassle! My only problem is the default view is zoomed fully in, can you set the zoom level? I'd like it to be about halfway??

Thanks
Rob

[spacerace]

ahh no it's ok, found it. adjusting the numeric value in the line

map.setCenter(point, 17);

adjusts the zoom.

Thanks
Rob