单页上的两个谷歌地图

Question

我希望能在单个页面上设置两个谷歌地图（API 3）。他们有一些共享的样式。我可以得到一个运行，但不是两个在一起。

• http://theredfrog.com/new/temp3.html - 一个地图（OK）
• http://theredfrog.com/new/temp4.html - 两张地图（碎）

这里的脚本...

<script type="text/javascript"> 
     function initialize() { 
var styles = [ 
    .... 

]; 

var hulloptions = { 
    mapTypeControlOptions: { 
     mapTypeIds: [ 'Styled'] 
    }, 

    center: new google.maps.LatLng(53.7413176, -0.3353987), 
    zoom: 15, 
    mapTypeId: 'StyledHull' 
}; 

var leedsoptions = { 
    mapTypeControlOptions: { 
     mapTypeIds: [ 'Styled'] 
    }, 

    center: new google.maps.LatLng(53.796177,-1.541862), 
    zoom: 15, 
    mapTypeId: 'StyledLeeds' 
}; 

maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions); 
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions); 

var image = './skin/logo.png'; 
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987); 
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862); 

var rfdMarkerHull = new google.maps.Marker({ 
     position: HullLatLng, 
     map: maphull, 
     icon: image 
    }); 
    var rfdMarkerLeeds = new google.maps.Marker({ 
     position: LeedsLatLng, 
     map: leedshull, 
     icon: image 
    }); 

var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' }); 
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' }); 
maphull.mapTypes.set('StyledHull', styledMapTypeHull); 
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Answer 1

这两条线看起来不正确：

var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' }); 
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' }); 

你不在JavaScript控制台中出现错误吗？

我想你的意思是：

var styledMapTypeHull = new google.maps.StyledMapType(styles, { 
    name: 'RFD Hull' 
}); 
var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { 
    name: 'RFD Leeds' 
}); 

（也略有较短的线路重新格式化）

这里的一些more information and a working example。

现在，我尝试使用Chrome中的开发工具打开第二张地图，我发现还有其他错误发生之前甚至还没有发现。

首先警告：

Warning: you have included the Google Maps API multiple times 
on this page. This may cause unexpected errors. 

然后lazyload未定义这里plugins.js：

$(".lazy").lazyload({ 
    effect: "fadeIn", 
    effectspeed: 600, 
    failure_limit: 10 
}); 

然后一些地图API压缩码内一个看起来很奇怪的错误，但如果你看看调用堆栈，您将在堆栈中看到您的initialize函数，并且如果您点击该函数，它将进入该行：

mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions); 

粘贴到这个JavaScript控制台，你会看到什么是错的：后

document.getElementById("map-leeds") 

而且更多的错误，甚至让到我看到这个问题之前，而看你的代码。

所以你有一些调试要做。您是否熟悉Chrome或其他浏览器中的开发者工具？如果没有，现在是时候了！这是一个great introduction to the Chrome DevTools。

Answer 2

你的问题（你需要通过与调试你的代码的运行）：

1. 错别字（map: mapleeds,不map: leedshull,

2. 排序，那么你就不能初始化它们

   之前使用变量

3. 这些无效：google.maps.StyledMapTypeHull,google.maps.StyledMapTypeLeeds（也许搜索和替换出错了。应该google.maps.StyledMapType

   <script type="text/javascript"> 
   var maphull = null; 
   var mapleeds = null; 
   function initialize() { 
   var styles = [ 
   { 
       stylers: [ 
       { saturation: -100 } 
       ] 
   },{ 
       featureType: 'water', 
       elementType: 'all', 
   stylers: [ 
        { lightness: -74 }, 
        { visibility: 'on' } 
        ] 
   },{ 
       featureType: 'landscape', 
       elementType: 'geometry', 
       stylers: [ 
       { lightness: -26 }, 
       { visibility: 'simplified' } 
       ] 
   },{ 
   featureType: 'road', 
   elementType: 'geometry', 
   stylers: [ 
       { hue: '#efefef' }, 
       { lightness: 83 }, 
       { visibility: 'simplified' } 
       ] 
   },{ 
        featureType: 'poi', 
        elementType: 'all', 
        stylers: [ 
        { hue: '#999999' }, 
         { saturation: -100 }, 
         { lightness: -23 }, 
         { visibility: 'on' } 
        ] 
   },{ 
       featureType: 'road', 
       elementType: 'labels', 
        stylers: [ 
        { saturation: -100 }, 
        { visibility: 'on' } 
       ] 
       } 
   ]; 
   
   var hulloptions = { 
       mapTypeControlOptions: { 
        mapTypeIds: [ 'Styled'] 
       }, 
   
       center: new google.maps.LatLng(53.7413176, -0.3353987), 
       zoom: 15, 
       mapTypeId: 'StyledHull' 
   }; 
   
   var leedsoptions = { 
       mapTypeControlOptions: { 
        mapTypeIds: [ 'Styled'] 
       }, 
   
       center: new google.maps.LatLng(53.796177,-1.541862), 
       zoom: 15, 
       mapTypeId: 'StyledLeeds' 
       }; 
   
   var image = './skin/logo.png'; 
   var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987); 
   var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862); 
   
   var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' }); 
   var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' }); 
   
   maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions); 
   mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions); 
   
   maphull.mapTypes.set('StyledHull', styledMapTypeHull); 
   mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds); 
       var rfdMarkerHull = new google.maps.Marker({ 
       position: HullLatLng, 
       map: maphull, 
       icon: image 
       }); 
       var rfdMarkerLeeds = new google.maps.Marker({ 
        position: LeedsLatLng, 
        map: mapleeds, 
        icon: image 
       }); 
   } 
   
   google.maps.event.addDomListener(window, 'load', initialize); 
   
   </script>