同一页面上的两个带有标记的 Google 地图

Question

我想在一个页面上显示两张地图，一张用于元素id= mapall，另一张用于id=mapall2。

两者都有多个以数组形式提供的标记 (var =markers and var = markers2)。目前两个地图都显示在页面上，但一次只有一个显示标记并具有地图控件（缩放、全屏）。如果我刷新页面，则另一张地图具有所有标记，而另一张则没有。如何让两个地图同时加载？

第一张地图：

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

第二张地图：

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
 </script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap2">
 </script>

这就是它们目前的样子（右边的地图也应该有标记，由markers2提供：

Answer 1

您包含两次 API。这会产生警告：

您已在此页面上多次包含 Google Maps API。这可能会导致意外错误

只包含一次 API，将两个地图的初始化代码放在一个初始化函数中。

一个选项：

<script>
function initialize() {
  initMap();
  initMap2();
}
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

proof of concept fiddle

代码 sn-p：

var markers = [{
  GPS1: -34.031342,
  GPS2: 18.577419,
  client_address: "somewhere1"
}];

function initialize() {
  initMap();
  initMap2();
}

function initMap() {
  var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers.length; i++) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
var markers2 = [{
  GPS1: -33.92465,
  GPS2: 18.84382,
  client_address: "somewhere2"
}];

function initMap2() {
  var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall2'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers2.length; i++) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}

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

#mapall,
#mapall2 {
  height: 50%;
  width: 100%;
  border: red solid 1px;
}

<div id="mapall"></div>
<div id="mapall2"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize">
</script>