單頁上的多個谷歌地圖

-1

我試圖在單個頁面上顯示多個谷歌地圖。具體數量的地圖實例可能因頁面而異。我發現這個代碼在回答另一個問題，這似乎正是我需要的：單頁上的多個谷歌地圖

function mapAddress(mapElement, address) { 
var geocoder = new google.maps.Geocoder(); 

geocoder.geocode({ 'address': address }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var mapOptions = { 
      zoom: 14, 
      center: results[0].geometry.location, 
      disableDefaultUI: true 
     }; 
     var map = new google.maps.Map(document.getElementById(mapElement), mapOptions); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
}); 
}

來源：https://stackoverflow.com/a/22328509/2740023

我不確定，我怎麼會修改這個代碼用正確的變量，使它工作。我可以訪問lat和long變量以及文本字符串格式的地址。我究竟在哪裏插入上述代碼？

來源

2017-04-14 Jake

您發佈的示例代碼看起來像有一些代碼來對地址進行地理編碼。如果你想顯示2張地圖，你需要創建兩個地圖對象，並將它們放在自己的div中。請參閱示例代碼：

HTML

<div id="map"></div> 
<div id="map2"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

CSS

#map { 
    height: 100%; 
} 
#map2 { 
    height: 100%; 
} 

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

的JavaScript

var map; 
var map2; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 8 
}); 
map2 = new google.maps.Map(document.getElementById('map2'), { 
    center: {lat: 30.2672, lng: -97.7431}, 
    zoom: 8 
}); 
}

我有這個對的jsfiddle樣本這裏：

https://jsfiddle.net/eb5owrdc/1/

請注意，您需要插入您自己的API密鑰才能使樣本正常工作。

我希望這有助於！

來源

2017-04-17 20:56:44

單頁上的多個谷歌地圖

回答

相關問題