Google Map

Hi all

Hope someone can point me in the right direction, had a quick look round the Google maps site and cant seem to find what I want.

What I need is a map on each details page for my butchers site.

One example.
http://www.best-butcher.co.uk/butcher-details/Plant-&-Wilton-Ltd/6

The pages are dynamic so I need some code which will display the map and automatically show the right place using the postcode variable to find the correct location.

Cheers
John Eva

EDIT

I found this but it dont seem to work just keeps coming up with an error message saying this website needs a new API code which can be found at Google.

http://www.websitebaker2.org/forum/index.php?topic=12846.0


The code below is in a file called map.php and I used an include to add it to the butcher-details.php file, the postcode variable is already set in that file.

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

<!-- ajax key -->        
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAFbbMNcr31A4Yst9AfTMbiBRwzlGtkuroYL2IOKwqqZ9s0GGbrBRsvYADc8NwOOxIiO4f11U1ppFaYA"
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: 300px; height: 300px; "></div>

PHP:

 

have you registered for a Google developer API key?

 

Get the Google API key, that will sort out your issues.

 

Yeah I got a key and added it to the code but still says this website needs a new key for some reason???

 

Did you follow Google's instructions on how to do this?