在同一個頁面上的多個谷歌地圖

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