Google Maps. Multiple Maps With Multiple Markers With Content

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 w

Solution 1:

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

functioninitMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    // create the mapvar 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 mapfor (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) {
        returnfunction(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 = [];

functioninitMap() {
  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) {
        returnfunction(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;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="mapNorth"class="map"></div><divid="mapSouth"class="map"></div>

Solution 2:

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

varcoords= [
    [{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>"}
      ]
    }]
];varmarkers= [];varmaps= [];vardot= [];vardots= [];functioninitMap() {

  /*Thiswilladdallmarkersofcoords[i] tomaps[i] */functionplaceMarkersOnMap(i) {
    for(varx=0, length1=coords[i][0].marks.length;x<length1;x++) {
      dots[x] =coords[i][0].marks[x];dot[x] =newgoogle.maps.LatLng(dots[x].mlat, dots[x].mlng);markers[x] =newgoogle.maps.Marker({
        position:dot[x],
        map:maps[i]
      });
    }
  }

  for(vari=0, length=coords.length;i<length;i++) {
    varpoint=coords[i];console.log(point[0].lat)varlatlng=newgoogle.maps.LatLng(point[0].lat, point[0].lng);maps[i] =newgoogle.maps.Map(document.getElementsByClassName('map')[i], {
      zoom:point[0].zoom,
      center:latlng
    });placeMarkersOnMap(i);
  }
}
initMap();