Custom style for Angular Google Map

Question

I am using Angular UI map and cant seem to find a directive for an option to change the style. Googles documention gives an example working with the google object. I tried getElementById for the map, however that leads to plethora of errors with ui objects.

My controller has:

$scope.map = { center: { latitude: 42.99, longitude: -81.255 }, zoom: 14, bounds: {}}; 

While HTML is:

<div id="map_canvas">
    <ui-gmap-google-map id='customMap' center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
        <ui-gmap-markers models="eventMarkers" coords="'self'" idKey="'id'" icon="'icon'" click="'onClick'">
            <ui-gmap-windows show="show">
                <div ng-non-bindable>{{content}}</div>
            </ui-gmap-windows>
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

Simple attempt at adding style with appropriate code to the scope, didnt change anything, or cause any errors.

Answer 1

Adding styles is really simple just add them to your controller like so:

var styleArray = [ //any style array defined in the google documentation you linked
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];
$scope.options = {
   styles: styleArray
};

Everything else can remain the same as your code above.