Forum | Appery.io

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");

Hi.

Please use the following code:

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

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

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

};

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

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

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...

Hi Matt!

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

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.

Lets try to move a line of code:

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

to the end of "CreateMarker" function.

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

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.

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');

var coordsArray = [];
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (coordsArray) {
for (i in coordsArray) {
coordsArray.setMap(null);
}
coordsArray.length = 0;
}
}
$(SearchB).click(deleteOverlays());

//and I added coordsArray.push(marker); to the CreateMarker function.

Hi Matt,

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

premarker&#46;setMap(null);/pre

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