Google Maps/Angular JS: Map updates not always reflecting data, and can't remove markers

Question

I have the following AngularJS method that takes an array of lat/lng and plots them on a map.

 $scope.zoomToIncludeMarkers = function(filteredPins) { // var defaultLatLng = '38.04973,-49.340406'; var bounds = new google.maps.LatLngBounds(); var infowindow = new google.maps.InfoWindow({}); infowindow.close(); filteredPins.forEach(function(c) { var latLng = new google.maps.LatLng(c.Latitude, c.Longitude); var siteInfo = '<h3>' + c.SiteName + '</h3>' + '<p>' + c.Address1 + '<br/>' + c.Address2 + '<br/>' + c.City + ', ' + c.State + ' ' + c.ZipCode + '</p>'; var marker = new google.maps.Marker({ position: latLng, map: $scope.map, icon: '/assets/img/locator.png' }); marker.setMap($scope.map); bounds.extend(latLng); if (typeof $scope.map != "undefined") { // $log.warn('$scope.map.fitbounnds ran...'); // $log.warn('lat/lng: ' + latLng); $scope.map.fitBounds(bounds); } marker.addListener('click', function() { infowindow.close(); infowindow.setContent(siteInfo) console.log('infowindow.open: ' + infowindow.open); infowindow.open($scope.map, this); $scope.findSelectedLocations(c.SiteName); }); }); google.maps.event.addListener(infowindow, 'closeclick', function() { console.log('infowindow closed ######'); console.log(infowindow); // marker.setMap(null); // $scope.resetSelectLists(); $rootScope.filteredData = $scope.dataObject; $scope.trialItemsSelected = []; }); }; 

It runs fine the first time, but as the dataset that is passed to it changes, the map doesn't update to reflect the reduced set of pins.

I'm also not sure how I go about removing pins when the dataset passed to it (filteredPins) is empty.

Answer 1

Old markers that have been created and set on the map by #zoomToIncludeMarkers the first time are not removed from the map automatically just because new markers are created and then set on the same map. I suspect that you just start accumulating all the markers for all the filteredPins ever passed into this method everytime it's called.

You'll have to manually remove previous markers.

To leave just the new reduced set of pins the second time #zoomToIncludeMarkers is ran and also remove all pins when filteredPins is empty, I'd just have a method for clearing all markers from the map at the top of #zoomToIncludeMarkers

var markers = [];

$scope.zoomToIncludeMarkers = function(filteredPins) {
  // removeMarkers();
  ...
}

function removeMarkers () {
  markers.forEach(function (marker) {
    marker.setMap(null);
  });
  markers = [];
}

To take advantage of a pattern like this, you'll need to store the markers you've created in an array somewhere ( markers in this case). Something like the following should do

filteredPins.forEach(function(c) {
  var latLng = new google.maps.LatLng(c.Latitude, c.Longitude);
  var marker = new google.maps.Marker({
    position: latLng,
    map: $scope.map,
    icon: '/assets/img/locator.png'
  }); 
  markers.push(marker);

  // FYI: I believe this is redundant. You don't need to manually set the marker on the map if you've already passed in the map via the markeroptions object
  marker.setMap($scope.map); 
  ...
}

Hope this helps