title: Change icon on click using angular-google-maps
body: <p>I have a number of markers on a map using angular-google-maps.
  Can someone please tell me how to you change the icon image of a marker when you click on it?</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;div class="map-wrapper" flex&gt;
                  &lt;ui-gmap-google-map flex center='map.center' zoom='map.zoom' class="ui-gmap-google-map" control="control"&gt;
                      &lt;ui-gmap-markers models="markers" coords="'self'" icon="'icon'" doRebuildAll="true"&gt;&lt;/ui-gmap-markers&gt;
                  &lt;/ui-gmap-google-map&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>My controller code to populate markers:</p>
  
  <pre><code>function mapFilter(dealerList) {
              angular.forEach(dealerList, function (dlr) {
                  if (dlr.Category_type_id == $scope.categoryType) {
                      var marker = {
                          id: dlr.Site_owner_id + "_" + dlr.Site_locationseq,
                          icon: "/img/dealerlocator/pin_icon.png",
                          events: {
                              click: function (marker, eventName, model, arguments) {
                                  gotoAnchor(marker.key);
                              }
                          },
                          latitude: dlr.Site_address_map_latitude,
                          longitude: dlr.Site_address_map_longitude,
                          showWindow: false
                      };
  
                      $scope.markers.push(marker);
                  }
  
              });
          }
  
  
  function gotoAnchor(x) {
              var newHash = 'anchor_' + x;
              if ($location.hash() !== newHash) {
                  // set the $location.hash to `newHash` and
                  // $anchorScroll will automatically scroll to it
                  $location.hash('anchor_' + x);
  
                  // Update the map marker icons
                  angular.forEach($scope.markers, function (mkr) {
                      if (mkr.id == x) {
                          mkr.icon = "/img/dealerlocator/pin_icon_selected.png";
                      } else {
                          mkr.icon = "/img/dealerlocator/pin_icon.png";
                      }
                  });
  
                  expandDealer(x);
  
  
              } else {
                  // call $anchorScroll() explicitly,
                  // since $location.hash hasn't changed
                  $anchorScroll();
                  expandDealer(x);
              }
          };
  </code></pre>
  
  <p>In the gotoAnchor function above, you can see here that I've changed the icon in the markers, but this doesn't change on the map.</p>