Menu
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
413
Use a custom iconRight-click the placemark you want to customize. Click Properties (Windows, Linux) or Get Info (Mac). At the top right of the "Edit Placemark" or "Edit Folder" window, click the icon. Choose Add Custom Icon.
Customize a marker image. You can customize the visual appearance of markers by specifying an image file or vector-based icon to display instead of the default Google Maps pushpin icon. You can add text with a marker label, and use complex icons to define clickable regions, and set the stack order of markers.
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>
Missed that icon is an object.
icon= '{url: "//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" }'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With