How to filter google map marker using dropdown value in angularjs?

Question

I'm new to angular and google mapss.here I have 5 markers, I want to filter these markers using this pls dropdown, can someone help me.

example: if i select This is the best city in the world! Only one marker in Toronto should be displayed in the drop-down list.

if I choose This city live in the drop-down list should show two markers, which is in Los Angeles, Las Vegas

I added a demo

/Data var cities = [ { city : 'Toronto', desc : 'This is the best city in the world!', lat : 43.7000, long : -79.4000 }, { city : 'New York', desc : 'This city is aiiiiite!', lat : 40.6700, long : -73.9400 }, { city : 'Chicago', desc : 'This is the second best city in the world!', lat : 41.8819, long : -87.6278 }, { city : 'Los Angeles', desc : 'This city is live!', lat : 34.0500, long : -118.2500 }, { city : 'Las Vegas', desc : 'This city is live!', lat : 36.0800, long : -115.1522 } ]; //Angular App Module and Controller angular.module('mapsApp', []) .controller('MapCtrl', function ($scope) { var mapOptions = { zoom: 4, center: new google.maps.LatLng(40.0000, -98.0000), mapTypeId: google.maps.MapTypeId.TERRAIN } $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); $scope.markers = []; var infoWindow = new google.maps.InfoWindow(); var createMarker = function (info){ var marker = new google.maps.Marker({ map: $scope.map, position: new google.maps.LatLng(info.lat, info.long), title: info.city }); marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div>'; google.maps.event.addListener(marker, 'click', function(){ infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); infoWindow.open($scope.map, marker); }); $scope.markers.push(marker); } for (i = 0; i < cities.length; i++){ createMarker(cities[i]); } $scope.openInfoWindow = function(e, selectedMarker){ e.preventDefault(); google.maps.event.trigger(selectedMarker, 'click'); } }); 

  #map { height:420px; width:600px; } .infoWindowContent { font-size: 14px !important; border-top: 1px solid #ccc; padding-top: 10px; } h2 { margin-bottom:0; margin-top: 0; } 

 <div ng-app="mapsApp" ng-controller="MapCtrl"> <div id="map"></div> <br><br> <label>Filter Marker </label><br> <select name="singleSelect" ng-model="data.singleSelect"> <option value="0">all</option> <option value="This is the best city in the world!">This is the best city in the world!</option> <option value="This city is aiiiiite">This city is aiiiiite</option> <option value="This is the second best city in the world!">This is the second best city in the world!</option> <option value="This city is live">This city is live</option> </select><br> <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> </div> </div> 

Answer 1

I would suggest the following examples below:

Call the filterMarkers function to render selected cities using the ngChange directive of the ngChange element:

 $scope.filterMarkers = function() { //1.select filtered cities var filteredCities; var cityDesc = $scope.data.singleSelect; if(cityDesc == '0') { filteredCities = cities; } else { filteredCities = cities.filter(function(c){ if(c.desc == cityDesc) return c; }); } //2.update markers on map $scope.clearMarkers(); for (i = 0; i < filteredCities.length; i++) { createMarker(filteredCities[i]); } } 

where the clearMarkers function is introduced to clear all displayed markers on the map:

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

Modified JSFiddle

Answer 2

Here is how I would do it. I will just write the steps to execute (the algorithm), not the actual code ...

1) Initial state: nothing is selected in the drop-down list → visualize all labels (through the for (i = 0; i < cities.length; i++){ createMarker(cities[i]);} loop for (i = 0; i < cities.length; i++){ createMarker(cities[i]);} )

2) The user selects a dropdown value

3) clear all markers → map without markers

4) filter cities by value in the drop-down menu

5) display markers only for filtered cities: for (i = 0; i < filteredCities.length; i++){ createMarker(cities[i]);}

6) now your map shows only markers for filtered cities.

I don’t know the GMaps API to tell you how to remove a marker, but this should be easy :)