shershen shershen - 4 months ago 52
AngularJS Question

How to style default map marker in Google maps angular plugin

I am using 2.0.X version of angular-google-maps.

All the markers are typical Google Maps style (red pointer) by default. While I what to style it a bit - either have the same shape but different colour or choose another shape. Without any custom images/icons involved, just basic but different colour.

Plugin documentation marker directive has a

options
attribute, which is referencing Google maps API docs where is says
google.maps.MarkerOptions
-

icon
Type: string|Icon|Symbol Icon for the foreground.
If a string
is provided, it is treated as though it were an Icon with the string
as url.

I've tried applying this like this

var pointObject = {
//other props
options: {
draggable: false,
icon: FORWARD_OPEN_ARROW //here
},
active: false
};
$scope.points.push(pointObject);


but this didn't work.

Answer

This is my solution to change marker:

in HTML:

  <md-whiteframe flex="grow" layout-margin>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
      <ui-gmap-marker idKey="1" coords="marker.coords" options="marker.options">
    </ui-gmap-marker>
    </ui-gmap-google-map>
  </md-whiteframe>

in Controller.ng.js:

uiGmapGoogleMapApi.then(function(maps) {

$scope.map = {
  center: {
    latitude: 43.6091569, 
    longitude: 57.4442909
  }, 
  zoom: 13,
  options: {
    scrollwheel: false,
    streetViewControl: false,
    draggable: isDraggable,
  }
};

    $scope.marker = {
      coords : {
        latitude: 47.6091569, 
        longitude: 33.4442909
      },
      options: {
        icon: '/marker.png',
      }
    };

    $scope.window = {...};
  });

Remember to inject uiGmapGoogleMapApi in controller