Forum | Appery.io

Hi

I can not show more than one info windows on a google map that loads more markers from a rest.

code
function log2(m) {
return ((Math.log(m)) / (Math.log(2)));
};
for (var k in value.geometry) {
if (locationHelper.checkLocation(k)) {
locationHelper.aLocations.push([value.geometry.location.lat, value.geometry.location.lng]);
}
}
var maxLatitude = -90,
minLatitude = 90,
maxLongitude = -180,
minLongitude = 180;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {
maxLatitude = locationHelper&#46;aLocations[0] > maxLatitude ? locationHelper&#46;aLocations[0] : maxLatitude;
minLatitude = locationHelper&#46;aLocations[0] < minLatitude ? locationHelper&#46;aLocations[0] : minLatitude;
maxLongitude = locationHelper&#46;aLocations[1] > maxLongitude ? locationHelper&#46;aLocations[1] : maxLongitude;
minLongitude = locationHelper&#46;aLocations[1] < minLongitude ? locationHelper&#46;aLocations[1] : minLongitude;
}
var map = new google&#46;maps&#46;Map(document&#46;getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google&#46;maps&#46;LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google&#46;maps&#46;MapTypeId&#46;ROADMAP
});

var contentString = "Text Text" ;

var infowindow = new google&#46;maps&#46;InfoWindow({
content: contentString
});

var marker, i;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {
marker = new google&#46;maps&#46;Marker({
position: new google&#46;maps&#46;LatLng(locationHelper&#46;aLocations[0], locationHelper&#46;aLocations[1]),
map: map,
title: 'Uluru (Ayers Rock)'
});
}

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
infowindow&#46;open(map,marker);
});

/code

infowindows only opens by clicking on the first marker.

where am I wrong?
tnk
Diego

Hello!

You do google.maps.event.addListener once for the last marker only. You have to add Listener event for every marker (in the loop, not outside the loop).
You also create one InfoWindow. You need only one InfoWindow for all markers with "Text Text" text?

No, I want to pass information such as "Store name" (from example), mapping this from a collection.

Text Text was a test to see the infowindow

thanks
Diego

Then you have to create InfoWindow not once, but for all markers.

solved, thank you very much,

could you help me to pass the data from the Appery database to a single infowindow?

Hi Diego,

You can map service result to a localStorage variable, then when creating Info Window use localStorage data as you need.

Hi Katya

i used this after mapping, but I do not get any result

code
var contentString = localStorage&#46;getItem('storeName') ;

var infowindow = new google&#46;maps&#46;InfoWindow({
content: contentString
});

/code

Hi Diego,

Please try to use following code instead of yours:
precode
function log2(m) {
return ((Math&#46;log(m)) / (Math&#46;log(2)));
};
for (var k in value&#46;geometry) {
if (locationHelper&#46;checkLocation(k)) {
locationHelper&#46;aLocations&#46;push([value&#46;geometry&#46;location&#46;lat, value&#46;geometry&#46;location&#46;lng]);
}
}
var maxLatitude = -90,
minLatitude = 90,
maxLongitude = -180,
minLongitude = 180;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {
maxLatitude = locationHelper&#46;aLocations[0] > maxLatitude ? locationHelper&#46;aLocations[0] : maxLatitude;
minLatitude = locationHelper&#46;aLocations[0] < minLatitude ? locationHelper&#46;aLocations[0] : minLatitude;
maxLongitude = locationHelper&#46;aLocations[1] > maxLongitude ? locationHelper&#46;aLocations[1] : maxLongitude;
minLongitude = locationHelper&#46;aLocations[1] < minLongitude ? locationHelper&#46;aLocations[1] : minLongitude;
}
var map = new google&#46;maps&#46;Map(document&#46;getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google&#46;maps&#46;LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google&#46;maps&#46;MapTypeId&#46;ROADMAP
});

var contentString = "Text Text&quot

var infowindow = new google&#46;maps&#46;InfoWindow({
content: contentString
});

var BindMarker = function(marker){

 google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
 }); 

};

var marker, i;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {

 marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locationHelper.aLocations[i][0], locationHelper.aLocations[i][1]), 
     map: map, 
     title: 'Uluru (Ayers Rock)' 
 }); 

 BindMarker(marker); 

};/code/pre

The problem that you have is create just one event handler for one (last) marker.

Thus it's need to handle all markers click. Its fixed in code above.

Regards.