angularjs google-maps google-maps-api-3 ng-map

How can I refresh/delete markers on Google maps using ngMaps

I am creating and clustering my markers with the markerclusterer library and this code:

    function populateMapLocationData(locations) {

        NgMap.getMap({id:'map'}).then(function(map) {
            $scope.assetMap = map;
            $scope.initMarkerClusterer(locations);
        });

    };

    $scope.initMarkerClusterer = function(locations) {

        $scope.bounds = new google.maps.LatLngBounds();
        var markers = $scope.createMarker(locations);

        var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
        var markerCluster = new MarkerClusterer($scope.assetMap, markers, mcOptions);

        $scope.assetMap.fitBounds($scope.bounds);
        $scope.assetMap.panToBounds($scope.bounds);

    };

    $scope.createMarker = function(location) {
        var latLng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lang));
        $scope.bounds.extend(latLng);
        var marker = new google.maps.Marker({position: latLng, title: asset.name});
        google.maps.event.addListener(marker, 'click', function() {

            var infowindow = new google.maps.InfoWindow();
            var center = new google.maps.LatLng( parseFloat(asset.lat), parseFloat(asset.lang) );

            infowindow.setContent("content");
            infowindow.setPosition(center);
            infowindow.open($scope.assetMap);

            google.maps.event.addListener($scope.assetMap, 'click', function(event) {
                infowindow.close();
            });

        });

        return marker;
    };

And this works fine on the first iteration.

Come to hitting populateMapLocationData function again with new locations, the bounds change and the map centers and zooms to the new location of the new markers so I think it is working however all the previous markers are still there.

What I want to achieve is when I call populateMapLocationData with a new set of locations, clear the existing markers and update the map with new ones.

I have seen markers[key].setMap(null); can be used but I haven't had any success.

Any advice is appreciated, thanks

Solution

Actually, if you are using Google's original markerclusterer.js, to remove a marker you just need to use its MarkerClusterer.prototype.removeMarker function and to remove an array of markers you just use its MarkerClusterer.prototype.removeMarkers Luckily, ngMaps's markerclusterer.js is just a wrapper for the original. More on that in Google's documentation

Ex:

vm.dynMarkers = [ {marker1}, {marker2}, ...] // your marker array
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); // creater your marker cluster
vm.markerClusterer.removeMarkers(vm.dynMarkers); // remove all markers

I've made a plunker example for you to follow wherein I used the ngMaps example library as a base so that it's easier for you (make sure to use your own API key): https://plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq?p=preview

Here's the embedded code as well:

var app = angular.module('myApp', ['ngMap']);

app.controller('mapController', function($http, $interval, NgMap) {
  var vm = this;
  vm.removeAllMarkers = removeAllMarkers;
  vm.dynMarkers = [];
  vm.map;

  NgMap.getMap().then(function(map) {
    for (var i = 0; i < 1000; i++) {
      var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
      vm.dynMarkers.push(new google.maps.Marker({
        position: latLng
      }));
    }
    vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {});
    vm.map = map;
  });

  function removeAllMarkers() {
    vm.markerClusterer.removeMarkers(vm.dynMarkers);
    vm.dynMarkers = [];
    console.log('all markers in cluster removed');
  }
});

map,
div[map] {
  display: block;
  width: 600px;
  height: 400px;
}

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Dynamic ngMap demo</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script>
  <script>
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
  </script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
</head>

<body>
  <h1>Marker Cluster</h1>
  <hr />
  <div ng-controller="mapController as vm">
    <ng-map zoom="2" center="[43.6650000, -79.4103000]"></ng-map>
    <button ng-click="vm.removeAllMarkers();" type="button">Remove All Markers</button>
  </div>
</body>

</html>