Create new infoWindow for multiple markers generated from REST.

Mon Mar 10, 2014 4:43 am

Thank you for the reply, I have been trying to use the marker.setMap(null); but I cannot get it to work. I have to iterate back through each marker and call the setMap on each one. Does this look like I am headed in the right direction? Would I be better off pushing each marker to a new array and then try to iterate back through that in order to remove the markers? The following is in my global JS file:

function showLocations (){
list_coordinate = localStorage.getItem('json_response');
coordsArray = JSON.parse(list_coordinate);
var marker;
myLat = localStorage.getItem('local_geo_lat');
myLong = localStorage.getItem('local_geo_long');
myLatlng = new google.maps.LatLng(myLat,myLong);
map = Appery("map").gmap;
var markersArray=[];
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};

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,
icon:'http://maps.google.com/mapfiles/ms/ic...'
});
markersArray.push(marker);
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);
};

function removeMarker(coordsArray, i){
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
});
marker.setMap(null);
marker.setVisible(false);
Appery("map").refresh();
console.log("removeMarker run");
}

for (var i = 0, j = coordsArray.length; i < j; i++)
removeMarker(coordsArray, i);

for (i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);
}

This runs the search fine and I don't get any errors but nothing will delete.

Mon Mar 10, 2014 10:44 pm

Hi Matt.

The following code creates marker - and then removes it from the map.
:
pre
function removeMarker(coordsArray, i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(coordsArray.lat, coordsArray.long),
title: coordsArray.name,
});
marker.setMap(null);
marker.setVisible(false);
Appery("map").refresh();
console.log("removeMarker run");
}
/pre
So this code has no effect on markers which was created before.

You should delete markers from "markersArray" array. For example: markersArray.setMap(null);

Tue Mar 11, 2014 5:00 pm

I have been trying every sort of way to get setMap to work and for the life of me I cannot get it to make a marker go away. I even tried to just add a click event to the CreateMarker() and that doesn't work either.

var CreateMarker = function(coordsArray, i){
marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
map: Appery("map").gmap,
icon:'http://maps.google.com/mapfiles/ms/ic...'
});
markersArray.push(marker);
console.log(markersArray);
google.maps.event.addListener(marker, 'click', function(event) {
marker.setMap(null);
marker.setVisible(false);
//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);
};

For trying to delete from markersArray I ran:

function deleteMarkers(){
for (i = 0; i < markersArray.length; i++){
markersArray.setMap(null);
markersArray.setVisible(false);
}

Code: Select all

 console.log('deleteMarkers has run'); 
 Appery("map").options.mapElement.gmap("refresh"); 
 markersArray.length=0;    
 }

$(SearchB).click(deleteMarkers());
console.log(markersArray);

This doesn't do anything either.
I am at a total loss of how to remove these markers. I've spent days trying every bit of code that I can find on google but can't get the setMap() to work, any more help that you can give would be greatly appreciated!!

This is all in my JavaScript1 file

Tue Mar 11, 2014 10:44 pm

Hi Matt.

Following code should help.It removes all added markers when user click on the document:

pre
code

Code: Select all

 function deleteMarkers() { 
     for (i = 0; i < markersArray&#46;length; i++) { 
         markersArray[i]&#46;setMap(null); 
         markersArray[i]&#46;setVisible(false); 
     } 

     console&#46;log('deleteMarkers has run'); 
     &#47;&#47;Appery("map")&#46;options&#46;mapElement&#46;gmap("refresh"); 
     markersArray&#46;length = 0; 
 } 

 $(document)&#46;bind("click", deleteMarkers);

/code
/pre

Wed Mar 12, 2014 2:16 am

Thank you very much for the reply. I added your code modification but the markers still remain on the page after click. Its showing the 'deleteMarkers has run' every time that I click on the page but there is no effect. Here is my current code. I commented out the infowindow section and a previous attempt at a marker "click to delete".:

var markersArray = [];
var SearchB = Appery('show_on_map_button');

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

var CreateMarker = function(coordsArray, i){
marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.long ),
title: coordsArray.name,
map: Appery("map").gmap,
icon:'http://maps.google.com/mapfiles/ms/ic...'
});
markersArray.push(marker);

Code: Select all

 //console.log(markersArray); 
 //google.maps.event.addListener(marker, 'click', function(event) { 
     //marker.setMap(null); 
     //marker.setVisible(false); 
 //var infowindow = new google.maps.InfoWindow({content:

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

Code: Select all

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

};
//localStorage.setItem('localMarkersArray',markersArray);

for (i = 0; i < coordsArray.length; i++)
CreateMarker(coordsArray, i);
console.log("coordsArray loop run");

Code: Select all

 function deleteMarkers() { 
     for (i = 0; i < markersArray.length; i++) { 
         markersArray[i].setMap(null); 
         markersArray[i].setVisible(false); 
     } 
     console.log('deleteMarkers has run'); 
     markersArray.length = 0; 
 }

$(document).bind("click", deleteMarkers);
}

Does this look like it should work?
Thanks again
App Name is Hapsy, this code is in the JavaScript1 file.

Wed Mar 12, 2014 4:31 am

Please make sure that there is no other code which add markers. You should find this code and remove it from your application or use global "markersArray" array for all markers you are adding to the map.

Wed Mar 12, 2014 9:54 pm

Got it!
The:
Appery("map").options.mapElement.gmap('addMarker', marker);

was not needed at the end of the "CreateMarker" function because:

map: Appery("map").gmap,

in the marker object creates a marker as well. Thank you very much for leading me in the right direction!

Thu Jul 03, 2014 2:29 pm

var coordsArray=[
{
"lat":"39",
"lng":"16",
"name":"Mr. Rossi",
"address":"via Rossi, 1, Cosenza"
},
{
"lat":"38",
"lng":"16",
"name":"Mr. Bianchi",
"address":"via Bianchi, 1, Cosenza"
},
{
"lat":"39",
"lng":"16.5",
"name":"Mr. Neri",
"address":"via Neri, 1, Cosenza"
}
];

alert($('#mappa_googlemap').gmap+' '+Appery("googlemap").gmap);

----

The code i pasted does not work for me.
In particular calling:
alert($('#mappa_googlemap').gmap+' '+Appery("googlemap").gmap);
returns "Object - Undefined", saying that Appery("googlemap").gmap) is undefined... but i called the map component "googlemap" in appery interface. Where's my mistake(s)?
Thanks in advance

Fri Jul 04, 2014 2:12 am

Hi Andrea,

Please specify when do you invoke this code? May be map component not even initialized at this moment?

Please try this code instead of yours:

pre

//Note you should replace "mapName" with map component name.
var map = Appery("mapName").options.mapElement.gmap('get', 'map');
alert("map = " + map);

/pre

Regards.

Fri Jul 04, 2014 5:55 pm

i call the code i pasted before when my page, containing the google map component, is loaded. should i call the function in another event? how can i know the "map ready" state?

your code returns [Object object], so i think the map is correctly called/instantiated at that time.

however, after trying your code just only coping and pasting it, i used your map object into my code ("map", instead of Appery("myMap").gmap) and it works!