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

Question

我想将 3 个不同的谷歌地图插入网站的页面中，并包含标记。

以下脚本将带有标记的 Google map 放置在名为 #william_harvey 的 div 中。然后，我想要两个额外的不同 map 在名为 #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> 

Answer 1

带有参数mapId的initMap转换函数。然后使用 div id 调用该函数。 像这样:

function mapCreate(id)
{
      var myLatLng = {lat: -25.363, lng: 131.044};
      var map1 = new google.maps.Map(document.getElementById(id), {
        zoom: 4,
        center: myLatLng
      });
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map1,
        title: 'Hello World!'
      });
}

mapCreate('chaucer');
mapCreate('kims');

JsFiddle

如果您的行为 map 不同，请使用数组。