单页上的多个谷歌地图

-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

单页上的多个谷歌地图

回答

相关问题