Hi Panagiotis,
Please follow these steps.
You need to run following code when you need to populate your markers(please read all comments in this code).
pre
if(!self.markersArray)
self.markersArray();
Code: Select all
//Were "multiGoogleMap" is map component name.
var map = Appery("multiGoogleMap").options.mapElement.gmap('get', 'map');
//Create infowindow.
var infowindow = new google.maps.InfoWindow({
content: 'test content',
maxWidth: 320
});
Code: Select all
var CreateMarker = function(data){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
map: map,
draggable: true,
title: data.location
});
self.markersArray.push(marker);
//Add event handler and open infoWindow
google.maps.event.addListener(marker, 'click', function() {
//Set content for infowindow.
infowindow.setContent('Content of + ' + data.location + '');
//Open infowindow.
infowindow.open(map, marker);
});
};
//Note: in this part you should iterate through your object and create markers you need.
for (var i = 0; i < locationHelper.aLocations.length; i++)
//In this function you should to pass latitude, longitude and text to display in infowindow.
CreateMarker({lat: locationHelper.aLocations[i][0], long: locationHelper.aLocations[i][1], location: locationHelper.aLocations[i][2]});
/pre
Then you should add to your "Map" JS asset following JS code:
pre
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray.setMap(null);
}
markersArray.length = 0;
}
/pre
After you can invoke code below when you need to clear all markers on the map:
pre
clearOverlays();
/pre
Regards.