Question

我正试图在一个页面上显示多个谷歌地图。确切数量的地图实例可能因页面而异。我发现这个代码是对另一个问题的回答，这个问题看起来正是我所需要的：

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变量以及文本字符串格式的地址。我到底在哪里插入上面的代码？

Answer 1

您发布的示例代码看起来像是有一些代码来对地址进行地理编码。如果要显示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密钥才能使样本生效。

我希望这有帮助！

单页上的多个谷歌地图

1 个答案: