Center Google Map on Select Option AngularJS

Question

I'm trying to center map based on selection in drop down select option box. I've tried several examples, but I have yet to get the map to center to the new latitude and longitude coordinates.

I would like to make work using the existing code without starting over with another example.

Latest example I am trying is below in the code with centerMap() function.

Please help.
Thanks!

var sites = [{
    name: "ABC",
    FiftyPlus: "0.72",
    GAs: "0",
    AccPerOpp: "20.09",
    AutoPay: "0.44",
    WTR: "100",
    ISE: "Bert Bingham",
    lat: "29.9792183",
    lng: "-90.22268919999999"
  },
  {
    name: "AJAX",
    FiftyPlus: "0.81",
    GAs: "0",
    AccPerOpp: "18.7",
    AutoPay: "0.13",
    WTR: "100",
    ISE: "Bert Bingham",
    lat: "30.0032515",
    lng: "-90.22060119999999"
  },
  {
    name: "CBS",
    FiftyPlus: "0.8",
    GAs: "0",
    AccPerOpp: "16.99",
    AutoPay: "0.23",
    WTR: "100",
    ISE: "Bing Bingle",
    lat: "43.9703011",
    lng: "-90.08290799999999"
  },
  {
    name: "Turner",
    FiftyPlus: "0.78",
    GAs: "0",
    AccPerOpp: "17.68",
    AutoPay: "0.23",
    WTR: "100",
    ISE: "Bing Bingle",
    lat: "43.004759",
    lng: "-90.17053299999999"
  },
];

//Angular App Module and Controller

angular.module('mapsApp', [])
  .controller('MapCtrl', function($scope) {
    var mapOptions = {
      zoom: 7,
      center: new google.maps.LatLng(32.340803, -89.4855946),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var mapOptions1 = {
      zoom: 9,
      center: new google.maps.LatLng(31.3186154, -85.8286258),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    function centerMap() {

      if (document.getElementById("ISEs").value === 'Bert Bingle') {
        $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions1);
      }
    }

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();
    /*var icon = {
            url: "image/store.svg", // url
            scaledSize: new google.maps.Size(25, 25), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0) // anchor
        };

    */
    var createMarker = function(info) {
      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat, info.lng),
        title: info.name,
        icon: {
          url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        }
      });
      marker.content = '<div class="iw-ISE">' + info.ISE + '</div>' +
        '<div class="iw-labels">' + "GAs: " + info.GAs + '</div>' +
        '<div class="iw-labels">' + "Auto Pay: " + info.AutoPay + '</div>' +
        '<div class="iw-labels">' + "AccPerOpp:$ " + info.AccPerOpp + '</div>' +
        '<div class="iw-labels">' + "Fifty Plus: " + info.FiftyPlus + '</div>' +
        '<div class="iw-labels">' + "WTR: " + info.WTR + '</div>' +
        '<p>' + info.address + '</p>'

      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<h2 class ="title">' + marker.title + '</h2>' + marker.content);
        infoWindow.open($scope.map, marker);
      });
      $scope.markers.push(marker);
    }

    for (i = 0; i < sites.length; i++) {
      createMarker(sites[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
      e.preventDefault();
      google.maps.event.trigger(selectedMarker, 'click');
    }

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

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

<!DOCTYPE html>
<html>

<head>
  <title>Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="CSS/bootstrap.min.css">
  <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
  <div ng-app="mapsApp" ng-controller="MapCtrl">
    <div align="center" class="input-w">
      <div class="gulf">Gulf States</div>
      <fieldset>
        <label>ISE: </label>
        <select id="ISEs" class="dropdown" name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()" ng-change="centerMap()">
          <option value="0">all</option>
          <option id="1" value="Bert Bingham">Bert Bingham</option>
          <option id="2" value="Bing Bingle">Bert Bingle</option>
        </select><br><br>
      </fieldset>
    </div>
    <div id="map"></div>
    <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
  </div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAz-1j7m4EfcSFL9o_L4BV7OPyGWNlzpbI&sensor=false" onerror="googleError()"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/lib/jquery.min.js"></script>
</body>
</html>

Answer 1

You have some issues in your code:

1. When you call to controller's function, you need to define it on the controller's scope.
   So instead of just declare the function

   function centerMap() {
   

   Declare it on the controller

   $scope.centerMap = function () {
   

2. Like @georgeawg said, you have two ng-change directives on the select tag, you can combine them like this:

   ng-change="centerMap();filterMarkers();"
   

3. You're checking (in the if, it the value is Bert Bingle but it's never that's value because the (attribute) value of the option Bert Bingle is Bing Bingl. Also, you should check the scope and not the DOM so the right check is

   if ($scope.data.singleSelect === 'Bing Bingle') {
   

4. And finally, you don't need to create a new map in order to change the map's setting, there is an api for that setOptions.

   So, instead of calling

   $scope.map = new google.maps.Map(document.getElementById('map'),mapOptions1);
   

   Call this way

   $scope.map.setOptions(mapOptions1);
   

Working example

https://jsbin.com/cuqigaz/edit?js,output