Custom Map Styles?

[Routhinator]

I'm trying to implement custom map styles, however how can I access the map from the scope? I'm having trouble finding the name of the var that contains the map.

I need to do this:

var div = document.getElementById('surabaya');  
    var map = new google.maps.Map(div, options);  
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
    map.mapTypes.set('Styled', styledMapType);

In angularGM the 'map' variable is set automagically by AngularGM and we give it a map id with

 gm-map-id="'infoWindows'"

So where is infoWindows in the $scope now? Can I access it to do something like:

 infoWindows.mapTypes.set('Styled', styledMapType);

[dylanfprice]

There are two ways you can accomplish this:

• Probably the best option. Provide your style in the MapOptions, e.g. In html:

<gm-map gm-map-id="'infoWindows'" gm-map-options="infoWindowsOptions"></gm-map>

In javascript:

function MyCtrl($scope) {
  $scope.infoWindowsOptions = {
    ...
    styles: [new google.maps.StyledMapType(styles, { name: 'Styled' })],
    ...
  }
}

• You can get a handle on the actual google.maps.Map object as outlined in the docs. For example:

    angular.module('myModule').

    run(function(angulargmContainer) {
      var gmapPromise = angulargmContainer.getMapPromise('infoWindows');

      gmapPromise.then(function(gmap) {
        var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
        gmap.mapStyles.set('Styled', styledMapType);
      });
    });

[Routhinator]

Thanks.

[igler]

If I do a gmap.mapStyles.set('Styled', styledMapType); I get a 'TypeError: Cannot call method 'set' of undefined'. When I examine gmap object, then there is no mapStyles. I already grabbed the latest version, but no success.

[wpalahnuk]

create a jsfiddle, plunkr, or whatever and I'll take a look at it

[igler]

Hi, thanx for you help. Plunker is here: http://plnkr.co/edit/rGC2nz?p=preview

[wpalahnuk]

The mapOptions isn't being set correctly, should look like this

  $scope.mapOptions = {
        map : {
            center : new google.maps.LatLng(51.0, 10.0),
            zoom : 10,
            mapType : google.maps.MapTypeId.ROADMAP,
            styles : styles
        },
        marker : {
            clickable : false,
            draggable : true
        }
    };

look here for more info https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

[igler]

Thanx a lot. It is working now.