angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Add Icon object to ui-gmap-marker directive options #1925

Open tscritch opened 8 years ago

tscritch commented 8 years ago

I've been working on an app that is pretty map centric for a few months and now I am changing the icons to fit into the style of the app and also so they can be more informative. However, I have been using the ui-gmap-marker directive to create my markers on my map. The icons that I'm using are just circles that will sit directly on top of the point/location. By default the anchor point is the bottom center of the icon. I've been trying to change this by adding an anchor point object into my icon options for the directive. <ui-gmap-marker ng-if="marker.placeOnMap && marker.active" idKey="marker.id" coords="marker" options="{draggable: marker.draggable, icon: marker.icon" events="layout.map.markerEvents"></ui-gmap-marker>

marker.icon = {
     url: baseUrl + marker.map_icon_url,
     anchor: new window.google.maps.Point(18, 18)
};

But this is not working because the directive only takes a string for the url of the icon. I feel like this would be a pretty easy fix to change this so it takes an object with the various options that the marker icon has. Or if someone could point me to where this is so I could make the change myself I would gladly do it.

Thanks

elgurinn commented 8 years ago

iconOptions: { labelContent: '<span class="fa-stack fa-lg">' + '<i class="fa fa-circle fa-stack-1x"></i>' + '</span>', labelAnchor: '14 18', labelClass: yourClass, icon: ' ' },

<ui-gmap-markers options="'iconOptions'" click="cm.markerClicked" idkey="'id'" ng-if="cm.data" models="cm.data" coords="'self'" doRebuildAll="'true'">

If you don't want the default marker icon use icon: ' '. And I am also using ui-gmap-markers not ui-gmap-marker directive.

The labelAnchor controls where the icon will be situated, adjust accordingly.

ps. the icon I am using is from fontawesome

Hope this helps