Search code examples
google-maps-api-3google-maps-styling

Is it possible to change the Hybrid maptype as an StyledMapType?


I was wondering if you could change the features of the hybrid maptype like you can do on a styledmaptype. I ask this because i want to show the satellite map (or changed hybrid map) with only country borders, no roads citynames etc.

Thanks in advance!


Solution

  • You may observe the event maptypeid_changed of the map.

    Check the current mapTypeId by using getMapTypeId() and if it is equal to google.maps.MapTypeId.HYBRID apply the following style to the map by using map.setOptions()

    {
        featureType: "all",
        elementType: "labels",//hides all labels
        stylers: [
          { visibility:'off' }
        ]
      },
      {
        featureType: "road",//hides the roads
        stylers: [
          { visibility:'off' }
        ]
      }
    

    When the mapTypeId is not google.maps.MapTypeId.HYBRID apply the same style, but set both visibility-stylers to on

    In the end it may look like this:

    google.maps.event.addListener(map, 'maptypeid_changed', function() {
    
      var onoff=(this.getMapTypeId()==google.maps.MapTypeId.HYBRID)
                  ?'off'
                  :'on';
    
                 this.setOptions(
                    {
                      styles:[{
                                featureType: "all",
                                elementType: "labels",
                                stylers: [{ visibility:onoff }]
                              },
                              {
                                featureType: "road",
                                stylers: [{ visibility:onoff}]}
                            ]
                    }
                    );
    
    });
    google.maps.event.trigger(map,'maptypeid_changed');