Google maps API - multiple locations on multiple maps in one page

Question

we have to use google map for map location. For different maps with multiple locations in one page. Is it possible?

Actually we want multiple maps, but in google api code they give us one map for one page, how we can change and make this multiple maps.

google API link:- https://developers.google.com/maps/documentation/javascript/examples/icon-complex

code:-

// 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]
];

Please check Code Link:- Jsfiddle link

First is show multiple location, second map not show any location.

Use as many elemts you want and create maps its not map corresponds to container document.getElementById('map') add more container add m ore maps — Vinod Louis
Can you share that piece of the code? Maybe embed it in jsfiddle. — cosmoonot

cosmoonot cosmoonot · Accepted Answer · 2017-04-19T06:54:55

You need to pass two variables to your setMarkers function since you're creating two maps, you need to initialize two variables map and map1 and then call setMarkers(map, map1);.

In setMarkers function, you need to set two markers now, second marker will need the map option set to 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]
    });

UPDATED ANSWER:

#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>

Google maps API - multiple locations on multiple maps in one page

1 Answers