Google maps API - 一个页面中多个地图上的多个位置

Question

我们必须使用谷歌地图的地图位置。对于在一个页面中具有多个位置的不同地图。有可能吗？

实际上我们想要多个地图，但是在google api代码中，他们为我们提供了一个地图，我们如何更改并制作这些多个地图。

google API链接： - https://developers.google.com/maps/documentation/javascript/examples/icon-complex

代码： -

// google map section
function initMap() {
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 15,
 center: {lat: 35.9099, lng: 14.4498}
});
setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Property 3', 35.9065598, 14.4502898, 3],
  ['Bondi Beach', 35.9099206, 14.4498855, 2],
  ['Coogee Beach', 35.9159643, 14.4484053, 1]
];

请检查代码链接： - Jsfiddle link

首先显示多个位置，第二个地图不显示任何位置。

Answer 1

您需要将两个变量传递到setMarkers函数，因为您要创建两个映射，需要初始化两个变量map和map1，然后调用setMarkers(map, map1);

在setMarkers功能中，您需要立即设置两个标记，第二个标记需要将map选项设置为map1。

var marker1 = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map1,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });

更新的答案：

#map, #mapTwo{width: 300px; height: 500px; }
#map {float:left;}
#mapTwo {float:right;}

<div id="map"></div>

<div id="mapTwo"></div>

<script>
// google map section
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 35.9099, lng: 14.4498}
  });
  
  
  var map1 = new google.maps.Map(document.getElementById('mapTwo'), {
    zoom: 15,
    center: {lat: 35.9099, lng: 14.4498}
  });

  // modified to pass two variables, both map instances. 
  setMarkers(map, map1);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Property 3', 35.9065598, 14.4502898, 3],
  ['Bondi Beach', 35.9099206, 14.4498855, 2],
  ['Coogee Beach', 35.9159643, 14.4484053, 1]
];


// SECOND MAP LOCATIONS
var beaches2 = [
  ['Property - MAP 2', 35.9065598, 14.4512898, 3],
  ['Bondi Beach - MAP 2', 35.9099206, 14.4598855, 2],
  ['Coogee Beach - MAP 2', 35.9159643, 14.5484053, 1]
];

function setMarkers(map, map1) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  } 
  
  // second map markers
  for (var i = 0; i < beaches2.length; i++) { 
    var beach = beaches2[i];
    // markers for second map
    var marker1 = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map1,  // make sure to point to your second map
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
} 
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWAoxTVd_zUi11jJe9TEvu6MUoOfzTerE&callback=initMap"></script>