CODEWITHSUNDEEP
angularjsgoogle-mapsgoogle-places-apiangular-google-maps
Ranjith M
Ranjith M

Reputation: 529

angular google map different markers for types of markers

i'm using angular google map to render map and i'm using googleplaces for search and display nearby locations as markers. all i want is display different markers for different places. for example i have a collection of 20 markers of different types, if i have schools in that i have to highlight it with a school marker. my code is controller:-

var displayStoreMarkers = function(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
               var place = results[i];
               $scope.markers.push({
                      id: i,
                      coords: {
                         latitude: place.geometry.location.lat(),
                         longitude: place.geometry.location.lng()
                      },
                      data: 'hospital,school,accounting,airport,amusement_park,atm,bakery,bank,bar,cafe,church,food,hindu_temple',
                      name: place.types
               });
            }
          }
          $scope.$apply();
          $scope.length=results.length;
          $scope.place = results;
     }

and html:-

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="mapControl">
    <ui-gmap-markers models="markers" coords="'coords'">
        <ui-gmap-windows show="show">
            <div ng-non-bindable>{{name}}</div>
        </ui-gmap-windows>
    </ui-gmap-markers>  
</ui-gmap-google-map>

Upvotes: 2

Views: 787

Answers (1)

vp-platform
vp-platform

Reputation: 601

Use options.icon of <ui-gmap-marker> directive or typeOptions of <ui-gmap-markers> directive.

See docs:

http://angular-ui.github.io/angular-google-maps/#!/api/marker

http://angular-ui.github.io/angular-google-maps/#!/api/markers

Upvotes: 2

Related Questions