Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer

Question

Hiya All,

I have a bit of strange problem on this page: http://www.bluprintliving.com/locations it seems that the markers i want to display are showing up in Firefox but not showing up on Chrome/Safari or IE. I am not sure really where to start debugging this issue as there are no javascript errors.

The code is in two parts. The first a js file http://www.bluprintliving.com/js/local-area-gmaps.js

var localSearch = new GlocalSearch();
var global_point;

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);
    global_point = point;
   }else{
    alert("Postcode not found!");
   }
  }); 

 localSearch.execute(postcode + ", UK");
}  

function setCenterToPointLondon(point) {
 //map.setCenter(point, 15);
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 var marker = new GMarker(point,icon);
 map.addOverlay(marker);
}     

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

function createMarker(point,html) {
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
 });
 return marker;
}

Then for each map on the page there is a section for it which looks like:

FIRST MAP

<div id="map" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("WC1N 2PL", setCenterToPointLondon);
 usePointFromPostcode("EC1M 5RR", setCenterToPointLondon);
//]]>
</script>

SECOND MAP

<div id="map-no-5-doughty-street" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map-no-5-doughty-street"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("WC1N2PL", setCenterToPoint);  
//]]>
</script> 

THIRD MAP*

<div id="map-turnmill-street" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map-turnmill-street"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("EC1M5RR", setCenterToPoint);  
//]]>
</script> 

Now these are all dynamically generated so a page could potentially grow to more maps as the locations grow.

This all works as expected in Firefox but not the other browsers. The markers do not show and it seems the centring is also off in the other browsers.

Help! please! :)

Thanks in advance

UPDATE

I have placed all the code on one page so it's easy to see the problem and debug: http://www.bluprintliving.com/google-maps.php

Thanks Again

Answer 1

Finally solved it by rewriting the functions. The main JS file now reads:

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);      

var mapCollection = {};

function addLocation( location, map, zoom ) {
    var localSearch = new GlocalSearch();

    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);
                    mapCollection[map].setCenter(point, zoom);
                    var marker = new GMarker( point, icon );
                    mapCollection[map].addOverlay( marker );
                }else{
                    alert("Postcode not found!");
                }
            }); 

        localSearch.execute( location + ", UK" );   

}

To add a new map just do something like:

<div id="map" class="location-map"></div>                       
<script type="text/javascript"> 
//<![CDATA[  
    mapCollection["map"] = new GMap2(document.getElementById("map"));
    mapCollection["map"].addControl(new GLargeMapControl());
    mapCollection["map"].addControl(new GMapTypeControl());
    mapCollection["map"].setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);                         
    addLocation( "WC1N 2PL", "map", "11" );
    addLocation( "EC1M 5RR", "map", "11" ); 
//]]>
</script>   

MAP Number X*

<div id="map-turnmill-street" class="location-map"></div>                       
<script type="text/javascript"> 
//<![CDATA[  
    mapCollection["map-turnmill-street"] = new GMap2(document.getElementById("map-turnmill-street"));
    mapCollection["map-turnmill-street"] .addControl(new GLargeMapControl());
    mapCollection["map-turnmill-street"] .addControl(new GMapTypeControl());
    mapCollection["map-turnmill-street"] .setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
    addLocation( "EC1M5RR", "map-turnmill-street", 15 ); 
//]]>
</script> 

This will now provide you the ability to add multiple maps on the page each with as many markers as you want by adding more "addLocation" calls which takes String Location, Map holder name and Zoom level as inputs.