How can i use custom icon in ng-map marker(angular)?

Question

I have list of shops which contains latitude and longitude and i have particuler user latitude and longitude.

when user clicks map button two marker is showing in map which is identify user and shop location

how can i change that two marker icons instead of default marker A and B how can i use my own custom icons for marker 1.http://www.clker.com/cliparts/U/M/C/p/x/C/google-maps-pin-green.svg

2.http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png

Demo

Answer 1

Don't use the custom-marker directive. It will kill your performance for any large number of markers (e.g. 200+). Instead use the 'icon' attribute of the standard marker, something like this:

<marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}" icon="{ url:'/assets/images/deal-indicator.png', scaledSize:[32,40], origin: [0,0], anchor: [16,40] }">

The marker directive is just a wrapper for the Google Maps API v3 standard 'marker', so all of the standard marker properties are accessible when using ng-map.

The icon is a Javascript object, and the properties are as follows (from the documentation):

Properties

anchor | Type: Point

The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

origin | Type: Point

The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).

The icon can also be set programatically by using the 'setIcon' method of the marker, e.g.:

myMarker.setIcon('/assets/images/deal-indicator-selected.png');

Or, construct an icon object first and set this as the marker:

var customIcon = {
    url: "/images/my-marker.png",
    scaledSize: new google.maps.Size(32, 40),
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(16, 40)
};

myMarker.setIcon(customIcon);