Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Google maps custom marker icon

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

like image 413
JKoder Avatar asked Apr 01 '15 19:04

JKoder


People also ask

How do I create a custom icon for Google Maps?

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.

Can you add icons to Google Maps?

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.


2 Answers

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>

like image 158
Tiziano Zonta Avatar answered Sep 17 '22 15:09

Tiziano Zonta


Missed that icon is an object.

 icon= '{url:    "//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" }'
like image 33
JKoder Avatar answered Sep 18 '22 15:09

JKoder