Google Maps. Multiple maps with multiple markers with content

Question

I have this code to call multiple maps in one page, it's calling everything using arrays to make the code as short is possible.

from the question: Multiple googleMaps in one page with non sequential ID's

var coords = [
    {lat: 53.647143, lng: -2.317803, zoom: 10},
    {lat: 53.259065, lng: -4.417487, zoom: 7}
];
var markers = [];
var maps = [];

function initMap() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        maps[i] = new google.maps.Map(document.getElementsByClassName('Gmap')[i], {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}

This code runs using a callback once the google maps script is loaded and it's working very good, but it's displaying only one marker per map.

I need to add multiple markers on every map, I was thinking about include the markers coordinates inside the "coords" array:

    var coords = [
    {lat: 53.647143, lng: -2.317803, zoom: 10, marks: [
        {mlat: 53.647143, mlng: -2.317803, mCont: "<p>aaa</p>"},
        {mlat: 53.576524, mlng: -2.429149, mCont: "<p>bbb</p>"}
]},
    {lat: 53.259065, lng: -4.417487, zoom: 7, marks: [
        {mlat: 53.259065, mlng: -4.417487, mCont: "<p>ccc</p>"},
        {mlat: 53.412303, mlng: -3.004262, mCont: "<p>ddd</p>"},
        {mlat: 54.234574, mlng: -4.548636, mCont: "<p>eee</p>"}
]}
];

But I'm not sure how to implemented into the code to make it works, any ideas?

code running: https://jsfiddle.net/wfmztu8v/9/

Answer 1

There might be better ways to define your data. But with the existing format, this works:

function initMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    // create the map
    var point = coords[i];
    var latlng = new google.maps.LatLng(point.lat, point.lng);
    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point.zoom,
      center: latlng
    });
    // process the markers for the map
    for (var j = 0; j < coords[i].marks.length; j++) {
      if (!markers[i]) markers[i] = [];
      if (!infowindow[i]) infowindow[i] = new google.maps.InfoWindow();
      markers[i][j] = new google.maps.Marker({
        position: {
          lat: coords[i].marks[j].mlat,
          lng: coords[i].marks[j].mlng
        },
        map: maps[i]
      });
      // open an infowindow when marker clicked
      google.maps.event.addListener(markers[i][j], 'click', (function(map, content, infowindow) {
        return function(e) {
          infowindow.setContent(content);
          infowindow.open(map, this);
        }
      })(maps[i], coords[i].marks[j].mCont, infowindow[i]));
    }
  }
}

updated fiddle

code snippet:

var coords = [{
    lat: 53.647143,
    lng: -2.317803,
    zoom: 10,
    marks: [{
        mlat: 53.647143,
        mlng: -2.317803,
        mCont: "<p>aaa</p>"
      },
      {
        mlat: 53.576524,
        mlng: -2.429149,
        mCont: "<p>bbb</p>"
      }
    ]
  },
  {
    lat: 53.259065,
    lng: -4.417487,
    zoom: 7,
    marks: [{
        mlat: 53.259065,
        mlng: -4.417487,
        mCont: "<p>ccc</p>"
      },
      {
        mlat: 53.412303,
        mlng: -3.004262,
        mCont: "<p>ddd</p>"
      },
      {
        mlat: 54.234574,
        mlng: -4.548636,
        mCont: "<p>eee</p>"
      }
    ]
  }
];
var markers = [];
var maps = [];
var infowindow = [];

function initMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    var point = coords[i];
    var latlng = new google.maps.LatLng(point.lat, point.lng);

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point.zoom,
      center: latlng
    });
    for (var j = 0; j < coords[i].marks.length; j++) {
      if (!markers[i]) markers[i] = [];
      if (!infowindow[i]) infowindow[i] = new google.maps.InfoWindow();
      markers[i][j] = new google.maps.Marker({
        position: {
          lat: coords[i].marks[j].mlat,
          lng: coords[i].marks[j].mlng
        },
        map: maps[i]
      });
      google.maps.event.addListener(markers[i][j], 'click', (function(map, content, infowindow) {
        return function(e) {
          infowindow.setContent(content);
          infowindow.open(map, this);
        }
      })(maps[i], coords[i].marks[j].mCont, infowindow[i]));
    }
  }
}
initMap();

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

#mapNorth {
  height: 49%;
  width: 98%;
  float: top;
  border: 1px solid black;
}

#mapSouth {
  height: 49%;
  width: 98%;
  border: 1px solid black;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapNorth" class="map"></div>
<div id="mapSouth" class="map"></div>

Answer 2

The problem is that your code put marker0 on map0 and marker1 to map1... you have to iterate second time for markers..

var coords = [
    [{lat: 53.647143, lng: -2.317803, zoom: 10, marks: [ 
        {mlat: 53.647143, mlng: -2.317803, mCont: "<p>aaa</p>"},
        {mlat: 53.576524, mlng: -2.429149, mCont: "<p>bbb</p>"}
        ]
        }],
    [{lat: 53.259065, lng: -4.417487, zoom: 7, marks: [
        {mlat: 53.259065, mlng: -4.417487, mCont: "<p>ccc</p>"},
        {mlat: 53.412303, mlng: -3.004262, mCont: "<p>ddd</p>"},
        {mlat: 54.234574, mlng: -4.548636, mCont: "<p>eee</p>"}
      ]
    }]
];

var markers = [];
var maps = [];
var dot = [];
var dots = [];

function initMap() {

  /* This will add all markers of coords[i] to maps[i] */

  function placeMarkersOnMap(i) {
    for (var x = 0, length1 = coords[i][0].marks.length; x < length1; x++) {
      dots[x] = coords[i][0].marks[x];
      dot[x] = new google.maps.LatLng(dots[x].mlat, dots[x].mlng);

      markers[x] = new google.maps.Marker({
        position: dot[x],
        map: maps[i]
      });
    }
  }

  for (var i = 0, length = coords.length; i < length; i++) {
    var point = coords[i];
    console.log(point[0].lat)
    var latlng = new google.maps.LatLng(point[0].lat, point[0].lng);

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point[0].zoom,
      center: latlng
    });

    placeMarkersOnMap(i);
  }
}
initMap();