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

Question

我想在一个页面上显示两张地图，一张用于元素<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。

两者都有多个标记，在数组中提供（"laravel/passport": "^1.0"）。目前，两个地图都显示在页面上，但是一次只有一个地图显示标记并具有地图控件（缩放，全屏）。如果我刷新页面，那么另一个地图具有所有标记而另一个没有。如何同时加载两个地图？

第一张地图：

composer.json

第二张地图：

"require": {
    "php": ">=7.0.0",
    "fideloper/proxy": "~3.3",
    "laravel/framework": "5.5.*",
    "laravel/tinker": "~1.0",
    "laravelcollective/html": "^5.2.0",
}

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

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

代码段

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>