web-dev-qa-db-fra.com

Angular Icône de marqueur personnalisé Google maps

Je ne peux pas créer de marqueur personnalisé. Même si je passe un chemin d’image au paramètre icon, le repère orange par défaut est toujours présent. S'il vous plaît dites-moi si vous voyez quelque chose de mal.

Modèle de directive:  

<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>

J'utilise: //maps.googleapis.com/maps/api/js?v=3&sensor=true avec angular-google-maps/dist/angular-google-maps.js

angularjsgoogle-mapsangular-google-maps
10
JKoder

J'ai résolu en passant l'url de l'icône via la propriété options

Définir quelque chose comme ceci sur le contrôleur

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

et alors

<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>

14
Tiziano Zonta

Manqué cette icône est un objet.

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

J'ai résolu le problème de l'icône personnalisée Vérifiez avec plunker Cliquez ici

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

Html est là

<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>
0
Karthikeyan G