Create new infoWindow for multiple markers generated from REST.

Wed Mar 05, 2014 4:19 am

I have run through all of the related topics but cant find a working solution.
I am generating Markers from saved DB coordinates which is working fine.
I would like a new popup infoWindow for each marker but I can only get the window to display one of the results no matter which I click. on hover each marker correctly shows its cooresponding name. Is there something that I can add to my code to get a new window for each Marker that displays its specific info? I'm getting no debugger errors. The app name is Hapsy, its been shared with support previously.

This is what I'm using:

var response = JSON.stringify(data);
localStorage.setItem("json_response", response);
var list_coordinate = localStorage.getItem('json_response');
var coordsArray = JSON.parse(list_coordinate);
var marker;
var myLat = localStorage.getItem('local_geo_lat');
var myLong = localStorage.getItem('local_geo_long');
var myLatlng = new google.maps.LatLng(myLat,myLong);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

for (var i = 0, j = coordsArray.length; i < j; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
map: Appery("map").gmap,
});
var infowindow = new google.maps.InfoWindow({content: coordsArray.name});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("map").gmap,marker);
});
}
Appery("map").options.mapElement.gmap('addMarker', marker);
Appery("map").options.mapElement.gmap(mapOptions);
Appery("map").options.mapElement.gmap("refresh");

Wed Mar 05, 2014 5:53 am

Hi.

Please use the following code:

pre
var CreateMarker = function(coordsArray, i){
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
map: Appery("map").gmap,
});

Code: Select all

 var infowindow = new google&#46;maps&#46;InfoWindow({content: coordsArray[i]&#46;name});  

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

};

for (var i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);
/pre
Instead of yours:

pre
for (var i = 0, j = coordsArray.length; i < j; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
map: Appery("map").gmap,
});
var infowindow = new google.maps.InfoWindow({content: coordsArray.name});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("map").gmap,marker);
});
}
/pre
Also please look at the topic http://javascriptissexy.com/javascrip...

Wed Mar 05, 2014 7:26 am

Thank you so much for the help!
I received a TypeError: a is undefined on my debugger but couldnt find any a in your new code. I'm sure its a fault on my end somehow but I cant seem to find it...

Wed Mar 05, 2014 9:29 am

Hi Matt!

What is a line of code, that produce this error?

Wed Mar 05, 2014 4:16 pm

Firebug didnt give a line for the Error but I commented out each section of code and excluding the following(bottom of code):
Appery("map").options.mapElement.gmap('addMarker', marker);
Appery("map").options.mapElement.gmap(mapOptions);
Appery("map").options.mapElement.gmap("refresh");

got rid of the error.
Again thank you so much for your help with those infoWindows.

Wed Mar 05, 2014 11:07 pm

Lets try to move a line of code:

pre
code
Appery("map").options.mapElement.gmap('addMarker', marker);
/code
/pre

to the end of "CreateMarker" function.

Thu Mar 06, 2014 4:18 am

Code added to end of the CreateMarker() and all seems to work great! Thank you for your help

Sat Mar 08, 2014 7:11 am

Ok so now I've run into another issue that I cant solve. I need to remove the markers from the map at the user selects different search radius. The radius REST call work fine but I need to have the markers removed at each new search. Google says I need to iterate through my array and delete/hide one at a time but everything I try doesn't work. I addded this to the end of the code above but no luck...
var SearchB = Appery('show_on_map_button');

google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i < coordsArray.length; i++){
coordsArray.setMap(null);
}
coordsArray = new Array();
};

$(SearchB).click(google.maps.Map.prototype.clearMarkers());

I always get an error on the setMap() google function as undefined.

Sun Mar 09, 2014 1:49 am

I tried using this too with no luck. I don't get any errors in Firebug but the Markers do not go away:

var SearchB = Appery('show_on_map_button');

Sun Mar 09, 2014 11:43 pm

Hi Matt,

To remove certain marker from the map, please use following code:

premarker.setMap(null);/pre

Also we recommend to read markers documentation: https://developers.google.com/maps/do...