How can markers be filtered on a Google Map API without the need to refresh the map?

Question

How can markers be filtered on a Google Map API without the need to refresh the map?

I have created an Angular JS module that utilizes the Google Map API. The map is defined as a global variable, along with a global array for markers, and functions for managing these markers such as removing them, resetting the map, and adding new markers.

angular.module('gmapService', []).factory('gmapService', function($rootScope, $http){
    var googleMapService = {};

    var map;
    var markers = [];

function removeExistingMarkersFromTheMap() {
        for (var i = 0; i < markers.length; i++ ) {
            markers[i].setMap(null);
        }
        markers.length = 0;
}

var resetMap = function() {

        var oldZoom = map.zoom;
        var oldCenter = map.center;

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: oldZoom,
            center: oldCenter
        });

        removeExistingMarkersFromTheMap();
    }

googleMapService.placeMarkersOnMap = function(map, markersToPut) {
    // querying the data needed to place markers on the map
    for(var i=0; i<data.length; i++) {
        var marker = new google.maps.Marker({
                    position: latLng,
                    icon: icon
                    });
            markers.push(marker);
        }

        var mcOptions = {gridSize: 60, minZoom: 4, maxZoom: 12};
        var mc = new MarkerClusterer(map, markers, mcOptions);
    }
return googleMapService;
}

Currently, my process involves calling resetMap(), followed by placeMarkersOnMap(). This approach works fine, but I am seeking a way to update the displayed data on the map without having to reload the entire map itself.

Unfortunately, when I only execute removeExistingMarkersFromTheMap() and then placeMarkersOnMap(), the old data still persists. What could be causing this issue?

javascript angularjs google-maps google-maps-api-3

Answer 1

Answer №1

Utilizing the MarkerClusterer class for displaying markers, removing existing markers from the map using the previous method is no longer valid:

for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
}
markers.length = 0;

A better approach would be to use the clearMarkers function, which does the following:

Clears all clusters and markers from the clusterer

Furthermore, instead of instantiating a map object in a service, it is recommended to assign this task to a controller or directive.

Below is a modified version for the gmapService service:

angular.module('gmapService', []).factory('gmapService', function ($rootScope, $http) {
    var googleMapService = {};


    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

        var mcOptions = { gridSize: 60, minZoom: 4, maxZoom: 12 };
        markerCluster = new MarkerClusterer(map, markers, mcOptions);
    }
    return googleMapService;
});

Working example

angular.module('gmapService', []).factory('gmapService', function ($rootScope, $http) {
    var googleMapService = {};

    
    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

        var mcOptions = { gridSize: 60, minZoom: 4, maxZoom: 12 };
        markerCluster = new MarkerClusterer(map, markers, mcOptions);
    }
    return googleMapService;
});

var app = angular.module('mapApp', ['gmapService']);

app.controller('mapCtrl', function ($scope, gmapService) {
    $scope.locations = [
            { Id: 1, name: 'Oslo', lat: 59.923043, lng: 10.752839 },
            { Id: 2, name: 'Stockholm', lat: 59.339025, lng: 18.065818 },
            { Id: 3, name: 'Copenhagen', lat: 55.675507, lng: 12.574227 },
            { Id: 4, name: 'Berlin', lat: 52.521248, lng: 13.399038 },
            { Id: 5, name: 'Paris', lat: 48.856127, lng: 2.346525 }
    ];

    $scope.initMap = function () {
        $scope.map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 59.339025, lng: 18.065818 },
            zoom: 4
        });

        var btnAdd = document.getElementById('btnAdd');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnAdd);
        var btnRemove = document.getElementById('btnRemove');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnRemove);


        $scope.addMarkers = function () {
            gmapService.placeMarkersOnMap($scope.map, $scope.locations);
        };

        $scope.removeMarkers = function () {
            gmapService.removeExistingMarkersFromTheMap();
        };
    };

   
    $scope.initMap();
});

html, body {
    height: 400px;
    margin: 0;
    padding: 0;
}

#map {
    height: 400px;
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
        <button id="btnAdd" ng-click="addMarkers()">Add markers</button>
        <button id="btnRemove" ng-click="removeMarkers()">Remove markers</button>
        <div id="map"></div>
 </div>

Demo on Codepen

Answer 2

Utilizing the MarkerClusterer class for displaying markers, removing existing markers from the map using the previous method is no longer valid:

for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
}
markers.length = 0;

A better approach would be to use the clearMarkers function, which does the following:

Clears all clusters and markers from the clusterer

Furthermore, instead of instantiating a map object in a service, it is recommended to assign this task to a controller or directive.

Below is a modified version for the gmapService service:

angular.module('gmapService', []).factory('gmapService', function ($rootScope, $http) {
    var googleMapService = {};


    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

        var mcOptions = { gridSize: 60, minZoom: 4, maxZoom: 12 };
        markerCluster = new MarkerClusterer(map, markers, mcOptions);
    }
    return googleMapService;
});

Working example

angular.module('gmapService', []).factory('gmapService', function ($rootScope, $http) {
    var googleMapService = {};

    
    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

        var mcOptions = { gridSize: 60, minZoom: 4, maxZoom: 12 };
        markerCluster = new MarkerClusterer(map, markers, mcOptions);
    }
    return googleMapService;
});

var app = angular.module('mapApp', ['gmapService']);

app.controller('mapCtrl', function ($scope, gmapService) {
    $scope.locations = [
            { Id: 1, name: 'Oslo', lat: 59.923043, lng: 10.752839 },
            { Id: 2, name: 'Stockholm', lat: 59.339025, lng: 18.065818 },
            { Id: 3, name: 'Copenhagen', lat: 55.675507, lng: 12.574227 },
            { Id: 4, name: 'Berlin', lat: 52.521248, lng: 13.399038 },
            { Id: 5, name: 'Paris', lat: 48.856127, lng: 2.346525 }
    ];

    $scope.initMap = function () {
        $scope.map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 59.339025, lng: 18.065818 },
            zoom: 4
        });

        var btnAdd = document.getElementById('btnAdd');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnAdd);
        var btnRemove = document.getElementById('btnRemove');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnRemove);


        $scope.addMarkers = function () {
            gmapService.placeMarkersOnMap($scope.map, $scope.locations);
        };

        $scope.removeMarkers = function () {
            gmapService.removeExistingMarkersFromTheMap();
        };
    };

   
    $scope.initMap();
});

html, body {
    height: 400px;
    margin: 0;
    padding: 0;
}

#map {
    height: 400px;
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
        <button id="btnAdd" ng-click="addMarkers()">Add markers</button>
        <button id="btnRemove" ng-click="removeMarkers()">Remove markers</button>
        <div id="map"></div>
 </div>

Demo on Codepen

How can markers be filtered on a Google Map API without the need to refresh the map?

Answer №1

Similar questions

Encountering a CORS Policy Blockage Issue When Using JSON Data, but Resolving it by Changing the Header Type

Recursion using Node.js Promises

Decompressing JSON data type document

Error in Firefox when converting a string to a date in JavaScript using the format mm-dd-yyyy

Unlock hidden content with a single click using jQuery's click event

Node.js - Synchronize asynchronous calls to ensure coordinated execution in code

Issue with the execution of Javascript code. Edit required

Express server consistently receives JSON requests that contain no data in the request body

Angular 4's Panel Window: A User-Friendly Interface

When attempting to delete, I encounter an error stating that $index is undefined

Exploring the resolution of unit test for an Angular Bootstrap modal using the John Papa ViewModel style

Transitioning from a multipage application to Piral: A comprehensive guide

Problems arise with identification of asynchronous functions

Vue component fails to render due to a simple issue

Just for laughs: "The react-redux context value seems to be playing hide and seek; make sure to wrap the component in a <Provider> for it to show up!"

Obtaining zip files using AngularJS

Tips for successfully implementing a basic JQuery code in Internet Explorer

Effortlessly add and manipulate multiple classes in a generic class using querySelectorAll and classList, eliminating the

What steps should I take to design and implement this basic search form?

What is the process for generating an array of objects using JavaScript?