What works:
I have server side code that provides locations like the geocoding app example. I use the appery 'mapping' action on the data tab to get the markers to show up on my map based on the server results.
What does not work:
How can I removed markers?
They still appear even after my server call returns empty results (after I update the database). This answer https://developers.google.com/maps/do... uses javascript and not the 'mapping' action is that the only way?
I've worked extensively with the Google api, and found that the answer is yes ( just my opinion ).
My opinion however is that the Google example is flexible ... But doesn't really give you a good example of how easy it is to take a marker off the map.
First ...as you add the markers to the map, you add them to an array with global visibility.
like:
In a new, blank or elsewhere used JavaScript file:
aofmarkers = []
In your code or in the mapping where your markers are being added:
aofmarkers.push( Mynewmarker );
In the event where you need to remove the markers:
for ( var i = 0; i < aofmarkers.lenght ; i++ ){
aofmarkers.map = null ;
}
The basic concept is that you don't remove the markers from the map .... You remove from the marker .... It's knowledge of which map it was associated to.... If that makes sense....
Someone from Appery might be able to supply a more brilliant answer ....
Best,
Bruce
I am calling this javascript at the end of the success mapping. Creating the markers works great - after much struggle. Now I cannot clear the markers on each new service call.
I've been trying the suggestions listed here and stackoverflow. All that happens is more markers are added on each subsequent service call. Help?
//setMapOnAll(null);
var list_location = localStorage.getItem('farmProducts_storage');
var obj = JSON.parse(list_location);
var coordsArray;
coordsArray = [];
var coordsArray = obj;
var marker = [];
//var image = 'files/views/assets/image/Map-Marker-Bubble-Azure-icon.png';
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');
var CreateMarker = function(coordsArray, i){
Code: Select all
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray[i].lat, coordsArray[i].lng ),
title: coordsArray[i].business_name,
map: Appery("Gmap").gmap,
});
var infowindow = new google.maps.InfoWindow({content: ('[b]' + coordsArray[i].business_name + '[/b]' + coordsArray.hours_season + '
' + coordsArray.combinedAddress )});
// var infowindow = new google.maps.InfoWindow({content: coordsArray.business_name});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("Gmap").gmap,marker);
});
};
for (var i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);
Hello Blair,
Could you clarify what exactly doesn't work?
I need to clear any existing markers on the map upon each call of the service - which on success, runs this javascript.
What happens now is that on each call, more markers are added. The data called changes, but the old markers persist.
How can I clear the old markers on each service call?
Here is the full code that is currently working - except clearing markers.
//setMapOnAll(null);
var list_location = localStorage.getItem('farmProducts_storage');
var obj = [];
var obj = JSON.parse(list_location);
var coordsArray = [];
var coordsArray = obj;
var image = 'http://chart.apis.google.com/chart?ch...';
var map = new Appery("Gmap").options.mapElement.gmap('get', 'map');
var CreateMarker = function(coordsArray, i){
Code: Select all
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray[i].lat, coordsArray[i].lng ),
title: coordsArray[i].business_name,
map: Appery("Gmap").gmap,
});
var infowindow = new google.maps.InfoWindow({content: ('[b]' + coordsArray[i].business_name + '[/b]' + coordsArray.hours_season + '
' + coordsArray.combinedAddress )});
Code: Select all
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("Gmap").gmap,marker);
}); };
for (var i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);
google.maps.event.addListener(map, 'bounds_changed', function() {
Code: Select all
});Any idea how I can just clear the markers on each call of the service? According to the help online, I should just clear the array...but for some reason that doesn't appear to work! hmm....
Your help is most appreciated Sergiy
Please look google's example: https://developers.google.com/maps/do...
You just have to run setMapOnAll(null)
Hi Sergiy,
I've tried this. What is the correct implementation? I assume running it at the beginning is required.
However I get variations of this error,
Uncaught ReferenceError: setMapOnAll is not defined
Or that it is 'not a function'.
setMapOnAll(null);
list_location = [];
var list_location = localStorage.getItem('farmProducts_storage');
obj = [];
var obj = JSON.parse(list_location);
......
So even trying code from Stackoverflow where people had the same issue with a Google Map using just javascript,
function removeAllMarkers(){// removes all markers from map
for( var i = 0; i < coordsArray.length; i++ ){
delmarker = new google.maps.Marker({
position: coordsArray
});
delmarker.setMap(null);
}
coordsArray.length = 0;
markersInfoArray.length = 0;
};
I get Uncaught TypeError: Cannot read property 'setMap' of undefined
Is there anything specific I should be doing to ensure the Google Map library is loading in my project??