在同一个页面上的多个谷歌地图

Question

我想在一个页面上有多个谷歌地图。

我有这个代码，但我不知道我该怎么做。

必须添加什么？

我想要其他具有相同样式的地图。

还有一个问题是，谷歌地图不加载全部

任何人都可以帮我吗？

function initialize() { 

      var styles = [ 
       { 
        featureType: 'water', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#E6E6E6' }, 
         { saturation: -100 }, 
         { lightness: 59 }, 
         { visibility: 'on' } 
        ] 
       },{ 
        featureType: 'landscape.natural', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#999999' }, 
         { saturation: -100 }, 
         { lightness: -37 }, 
         { visibility: 'on' } 
        ] 
       },{ 
        featureType: 'road', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#4C4C4C' }, 
         { saturation: -100 }, 
         { lightness: -53 }, 
         { visibility: 'simplified' } 
        ] 
       },{ 
        featureType: 'landscape.man_made', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#ffffff' }, 
         { saturation: -100 }, 
         { lightness: 100 }, 
         { visibility: 'on' } 
        ] 
       },{ 
        featureType: 'road.highway', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#bfbfbf' }, 
         { saturation: -100 }, 
         { lightness: 30 }, 
         { visibility: 'on' } 
        ] 
       },{ 
        featureType: 'road.arterial', 
        elementType: 'labels', 
        stylers: [ 
         { hue: '#bfbfbf' }, 
         { saturation: -100 }, 
         { lightness: -3 }, 
         { visibility: 'simplified' } 
        ] 
       },{ 
        featureType: 'road.local', 
        elementType: 'geometry', 
        stylers: [ 
         { hue: '#f1f1f1' }, 
         { saturation: -100 }, 
         { lightness: -5 }, 
         { visibility: 'simplified' } 
        ] 
       },{ 
        featureType: 'poi', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#e6e6e6' }, 
         { saturation: -100 }, 
         { lightness: 55 }, 
         { visibility: 'on' } 
        ] 
       },{ 
        featureType: 'poi.park', 
        elementType: 'all', 
        stylers: [ 
         { hue: '#d0d0d0' }, 
         { saturation: -100 }, 
         { lightness: 16 }, 
         { visibility: 'on' } 
        ] 
       } 
      ]; 

      var mapOptions = { 
      mapTypeControlOptions: { 
       mapTypeIds: [ 'Styled'] 
      }, 
      center: new google.maps.LatLng(37.96112215672197, 23.72348675727846), 
      zoom: 16, 
      mapTypeId: 'Styled' 
      }; 

      var map = new google.maps.Map(document.getElementById('map-canvas'), 
       mapOptions); 

      var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 

      map.mapTypes.set('Styled', styledMapType); 
     } 

     function loadScript() { 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 
       'callback=initialize'; 
      document.body.appendChild(script); 
     } 

     window.onload = loadScript; 

Answer 1

你有以下几点：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 
map.mapTypes.set('Styled', styledMapType); 

我会一一讲解：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

这assignes给变量map新google.maps.Map类型元素ID #map-canvas

var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 

这assignes给变量StyledMapType的新google.maps.StyledMapType的风格先前声明，终于

map.mapTypes.set('Styled', styledMapType); 

我们叫回来的map变量，并使用mapTypes.set方法来重视它在以前的任务声明的styledMapType 。

如果你想在同一个文档中有多个地图，你应该在第一个实例中用var styledMapType创建新的样式，然后在不同的容器上创建不同的地图，并将每个样式附加到你想要样式化的每个地图上。

在最后你应该有这样的事情：

var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 

var map1 = new google.maps.Map(document.getElementById('map1'), mapOptions); 
map1.mapTypes.set('Styled', styledMapType); 
var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions); 
map2.mapTypes.set('Styled', styledMapType); 
var map3 = new google.maps.Map(document.getElementById('map3'), mapOptions); 
// This map uses the standard styling 

和HTML标记只是

<div id="map1"></div> 
<div id="map2"></div> 
<div id="map3"></div> 

当当，3张地图在同一页上运行，以不同的风格。使用mapOptions为模板 创建不同的设置变量，你还可以将不同的起始位置为每个地图，使用不同的styledMapType可以设定不同的两种风格：

var mapLondon = new google.maps.Map(document.getElementById('mapLondon'), mapLondonOptions); 
mapLondon.mapTypes.set('Styled', styledMapLondon); 
var mapNewyork = new google.maps.Map(document.getElementById('mapNewyork'), mapNewyorkOptions); 
mapNewyork.mapTypes.set('Styled', styledMapNewyork);