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]));
}
}
}
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();
Post a Comment for "Google Maps. Multiple Maps With Multiple Markers With Content"