javascript - 同一页上有多个标记的Google map

我想将3种不同的Google地图插入网站的页面中，并且还包括标记。

以下脚本将带有标记的google地图放置在名为#william_harvey的div中。然后，我希望在其他名为#chaucer和#kims的div中显示带有标记的两个附加且不同的地图，但无法使它起作用。有什么建议吗？

 <script>
 function initMap() {
      var myLatLng = {lat: -25.363, lng: 131.044};
      var map1 = new google.maps.Map(document.getElementById('william_harvey'), {
        zoom: 4,
        center: myLatLng
      });
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
      });
    }
        </script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>

最佳答案

制作3个单独的google.maps.Map对象，3个单独的google.maps.Marker对象，并将每个标记添加到其关联的地图中。

proof of concept fiddle

代码段：

var william_harvey = {
  lat: 51.143183,
  lng: 0.915349
};
var chaucer = {
  lat: 51.261797,
  lng: 1.087446
};
var kims = {
  lat: 51.286869,
  lng: 0.556317
};

function initMap() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };
  var map1 = new google.maps.Map(document.getElementById('william_harvey'), {
    zoom: 14,
    center: william_harvey
  });
  var marker1 = new google.maps.Marker({
    position: william_harvey,
    map: map1,
    title: 'Hello World!'
  });
  var map2 = new google.maps.Map(document.getElementById('chaucer'), {
    zoom: 14,
    center: chaucer
  });
  var marker2 = new google.maps.Marker({
    position: chaucer,
    map: map2,
    title: 'Hello World!'
  });
  var map3 = new google.maps.Map(document.getElementById('kims'), {
    zoom: 14,
    center: kims
  });
  var marker2 = new google.maps.Marker({
    position: kims,
    map: map3,
    title: 'Hello World!'
  });

}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#william_harvey,
#chaucer,
#kims {
  height: 300px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="william_harvey" style="border: 2px solid #3872ac;"></div>
<div id="chaucer" style="border: 2px solid #3872ac;"></div>
<div id="kims" style="border: 2px solid #3872ac;"></div>

关于javascript - 同一页上有多个标记的Google map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32476153/