两个风格的谷歌地图在一个页面上

这两行看起来不对:

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

(也为较短的行重新格式化)

这里有一些更多的信息和一个工作示例。

现在，我尝试你的第二个地图与开发人员工具在Chrome中打开，我看到还有其他错误之前，它甚至得到那么远。

第一个警告:

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

则plugins.js中lazyload未定义:

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

然后在一些Maps API压缩代码中出现了一个神秘的错误，但是如果你看一下调用堆栈，你会在堆栈中看到initialize函数，如果你点击它，它会转到这一行:

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

将其粘贴到JavaScript控制台，你就会看到哪里出错了:

document.getElementById("map-leeds")

还有更多的错误，甚至在我看到你的代码时看到的问题之前。

所以你有一些调试要做。您熟悉Chrome或其他浏览器中的开发人员工具吗?如果没有，现在是时候了!

您的问题是(您需要使用调试器运行您的代码):

1. 拼写错误(map: mapleeds, not 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>