Multiple infowindows problem

Fri Apr 11, 2014 11:25 am

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.aLocations.length; i++) {
maxLatitude = locationHelper.aLocations[0] > maxLatitude ? locationHelper.aLocations[0] : maxLatitude;
minLatitude = locationHelper.aLocations[0] < minLatitude ? locationHelper.aLocations[0] : minLatitude;
maxLongitude = locationHelper.aLocations[1] > maxLongitude ? locationHelper.aLocations[1] : maxLongitude;
minLongitude = locationHelper.aLocations[1] < minLongitude ? locationHelper.aLocations[1] : minLongitude;
}
var map = new google.maps.Map(document.getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google.maps.LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var contentString = "Text Text" ;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

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

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

/code

infowindows only opens by clicking on the first marker.

where am I wrong?
tnk
Diego

Fri Apr 11, 2014 11:45 am

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?

Fri Apr 11, 2014 11:52 am

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

Fri Apr 11, 2014 12:57 pm

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

Fri Apr 11, 2014 3:16 pm

solved, thank you very much,

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

Fri Apr 11, 2014 4:04 pm

Hi Diego,

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

Mon Apr 14, 2014 8:20 am

Hi Katya

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

code
var contentString = localStorage.getItem('storeName') ;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

/code

Mon Apr 14, 2014 11:03 pm

Hi Diego,

Please try to use following code instead of yours:
precode
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.aLocations.length; i++) {
maxLatitude = locationHelper.aLocations[0] > maxLatitude ? locationHelper.aLocations[0] : maxLatitude;
minLatitude = locationHelper.aLocations[0] < minLatitude ? locationHelper.aLocations[0] : minLatitude;
maxLongitude = locationHelper.aLocations[1] > maxLongitude ? locationHelper.aLocations[1] : maxLongitude;
minLongitude = locationHelper.aLocations[1] < minLongitude ? locationHelper.aLocations[1] : minLongitude;
}
var map = new google.maps.Map(document.getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google.maps.LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var contentString = "Text Text&quot

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var BindMarker = function(marker){

Code: Select all

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

};

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

Code: Select all

 marker = new google&#46;maps&#46;Marker({ 
     position: new google&#46;maps&#46;LatLng(locationHelper&#46;aLocations[i][0], locationHelper&#46;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.