为什么谷歌地图标记在Firefox上不显示在Chrome，Safari和Internet Explorer上 [英] Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer

问题描述

我在此页面上有一些奇怪的问题： http://www.bluprintliving.com/locations 似乎我想要显示的标记显示在Firefox中，但不能显示在Chrome / Safari或IE上。我不知道真的在哪里开始调试这个问题，因为没有javascript错误。

代码分为两部分。第一个js文件 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）; 
 
函数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， result $）
 callbackFunction（point）; 
 global_point = point; 
} else {
 alert（Postcode not found！）; 
} 
 }）; 
 
 localSearch.execute（邮政编码+，英国）; 
} 
 
函数setCenterToPointLondon（point）{
 //map.setCenter(point，15）; 
 map.setCenter（新的GLatLng（51.50788772102843，-0.1050567626953125），11）; 
 var marker = new GMarker（point，icon）; 
 map.addOverlay（marker）; 
} 
 
函数setCenterToPoint（point）{
 map.setCenter（point，15）; 
 var marker = new GMarker（point，icon）; 
 map.addOverlay（marker）; 
} 
 
函数createMarker（point，html）{
 var marker = new GMarker（point）; 
 GEvent.addListener（marker，click，function（）{
 marker.openInfoWindowHtml（html）; 
}）; 
返回标记; 
} 
  

然后，对于页面上的每个地图，都有一个类似于：

第一张地图

  ; div id =mapclass =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（新的GLatLng（51.50788772102843，-0.1050567626953125），11）; 
 usePointFromPostcode（WC1N 2PL，setCenterToPointLondon）; 
 usePointFromPostcode（EC1M 5RR，setCenterToPointLondon）; 
 //]]> 
< / script> 
  

SECOND MAP

 < div id =map-no-5-doughty-streetclass =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（新的GLatLng（51.50788772102843，-0.1050567626953125），11）; 
 usePointFromPostcode（WC1N2PL，setCenterToPoint）; 
 //]]> 
< / script> 
  

第三张地图*

 < div id =map-turnmill-streetclass =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（新的GLatLng（51.50788772102843，-0.1050567626953125），11）; 
 usePointFromPostcode（EC1M5RR，setCenterToPoint）; 
 //]]> 
< / script> 
  

现在这些都是动态生成的，所以一个页面可能随着地点的增长而增长到更多的地图。 / p>

这一切都按照预期在Firefox中工作，而不是其他浏览器。标记不显示，似乎在其他浏览器中的中心也是关闭。

帮助！请！ ：

提前感谢

更新

我已将所有代码放在一个页面上，所以很容易看到问题和调试： http://www.bluprintliving.com/google-maps.php

再次感谢

解决方案

最后通过重写函数解决它。主要的JS文件现在显示为：

  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 = {}; 
 
函数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邮箱没有找到！）; 
} 
}）; 
 
 localSearch.execute（location +，UK）; 
 
} 
  

要添加一个新的地图，只需要执行以下操作： p>

 < div id =mapclass =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> 
  

地图编号X *

 < div id =map-turnmill-streetclass =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> 
  

现在，您可以在页面上添加多个地图，每个地图都有与您相同的标记想要通过添加更多的addLocation调用，它们将String Location，Map holder name和Zoom level作为输入。

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

解决方案

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.

这篇关于为什么谷歌地图标记在Firefox上不显示在Chrome，Safari和Internet Explorer上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！