shershen shershen - 1 year ago 123
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

attribute, which is referencing Google maps API docs where is says

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,
active: false

but this didn't work.

Answer Source

This is my solution to change marker:

in HTML:

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


uiGmapGoogleMapApi.then(function(maps) {

$ = {
  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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download