Angular Google maps custom marker icon

Question

I cannot create a custom marker. Even though I am passing an image path to the icon parameter I am still getting the default orange marker. Please tell me if you see anything wrong.

Directive's template:

<div id="searchMap" class="googleMaps-destinations">
<div class="google-maps">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
        <ui-gmap-marker 
            ng-repeat="marker in search.origin_airports" 
            coords="marker.originMarker.location" 
            icon="marker.originMarker.icon.url" 
            fit="false" 
            idkey="'<< marker.originMarker.id >>'" >
        </ui-gmap-marker>
    </ui-gmap-google-map>
</div>

I am using : //maps.googleapis.com/maps/api/js?v=3&sensor=true with angular-google-maps/dist/angular-google-maps.js

I just noticed that I cannot use animations as well. – JKoder Apr 01 '15 at 19:06 — JKoder, Apr 01 '15 at 19:06

score 14 · Answer 1 · answered Apr 01 '15 at 19:17

14

Missed that icon is an object.

 icon= '{url:    "//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" }'

answered Apr 01 '15 at 19:17

JKoder

396
1
2
10

that worked. But I don't think that what the doc says http://angular-ui.github.io/angular-google-maps/#!/api – Toolkit May 15 '15 at 04:38

score 14 · Answer 2 · answered Apr 02 '15 at 14:41

I solved passing icon url through options property

Set something like this on controller

marker.options: {
    icon:'//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"'
}

and then

<div id="searchMap" class="googleMaps-destinations">
   <div class="google-maps">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
    <ui-gmap-marker
        options="marker.options" 
        ng-repeat="marker in search.origin_airports" 
        coords="marker.originMarker.location"      
        fit="false" 
        idkey="'<< marker.originMarker.id >>'">
    </ui-gmap-marker>
</ui-gmap-google-map>

Looks like this issue, of having to set the icon through the options hash, has been reported: https://github.com/angular-ui/angular-google-maps/issues/1408 — ecbrodie, Aug 16 '15 at 19:19

score 0 · Answer 3 · answered May 11 '16 at 09:01

I have solved the custom icon problem Check with plunker Click here

options: {  draggable: false,      icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }

Html is here

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        </ui-gmap-marker>
    </ui-gmap-google-map>

Angular Google maps custom marker icon

3 Answers3