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

Question

I am new to angular and google maps.here i have 5 markers,i want to filter that markers using that dropdown value pls can anyone help me out .

example: if i select This is the best city in the world!in dropdown map should show only one marker which is Toronto

if i select This city is live in dropdown map should show two marker which is Los Angeles,Las Vegas

i have added my 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 propose the following changes to the provided example:

Invoke filterMarkers function to render selected cities viangChange directive of select 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 clearMarkers function is introduced to clear all the rendered markers on 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

This is how I would implemented it. I will just write the steps to perform (algorithm), not the actual code ...

1) Initial state: nothing is selected in dropdown -> render all marks (via loop for (i = 0; i < cities.length; i++){ createMarker(cities[i]);})

2) User selects some dropdown value

3) clear all markers -> map is without markers

4) filter cities by value in dropdown

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

6) now your map shows only markers for filtered cities

I do not know GMaps API enough to tell you, how to remove a marker, but it should be easy :)