How to remove landmarks from google map with google map angular component

Question

I'm using the google map angular component and it's working pretty good!

But now I want to remove some of the landmarks from the map to reduce its congestion, to be able to show my markers a little more clearly.

I've found these resources below but can't figure out how to apply it to the <google-map> node package I'm using.

1. Site to create json for hiding landmarks and other features on map
2. shows how to hide map features from google map dev site
3. SO link that describes same issue

I see in this google documentation it shows applying styles to 'googlemap' with 'setMapStyle()' but this isn't a method in the angular package

Here below is my component (not all code) where I'm using google maps but it shows how I'm using the all code for the map

import {
  MapInfoWindow,
  MapMarker,
  GoogleMap
} from '@angular/google-maps';

export class YogabandEventsComponent implements OnInit {
  colContentRef: ElementRef;
  @ViewChild(GoogleMap, {
    static: false
  }) googleMap: GoogleMap;
  @ViewChild(MapInfoWindow, {
    static: false
  }) infoWindow: MapInfoWindow;

  zoom = 12;
  center: google.maps.LatLngLiteral;
  options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    scrollwheel: true,
    maxZoom: 18,
    minZoom: 10,
    streetViewControl: false,
    fullscreenControl: false
  };

  markers: Marker[];
  infoContent = '';

  constructor(...) { ...
  }

  openInfo(marker: MapMarker, content) {
    this.infoContent = content;
    this.infoWindow.open(marker);
  }

  showMarkers() {
    this.markers = [];
    for (const ybEvent of this.yogabandEvents) {
      const marker = new Marker();
      marker.info = ybEvent.name;
      marker.title = ybEvent.name;
      marker.position = {
        lat: ybEvent.latitude,
        lng: ybEvent.longitude
      };
      marker.label = {
        color: '#17a2b8',
        text: ybEvent.yogaType,
        fontWeight: 'bold',
        fontSize: '16px'
      };
      marker.options = {
        icon: {
          // scaledSize: new google.maps.Size(40, 40),
          url: 'assets/images/marker.svg',
          labelOrigin: new google.maps.Point(18, 50)
        }
      };
      this.markers.push(marker);
    }
  }

}

<div class="col flex-fill h-100 px-0 right-col">
  <google-map [options]="options" [zoom]="zoom" [center]="center" class="h-100" height="100%" width="100%">
    <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)">
    </map-marker>
    <map-info-window>{{ infoContent }}</map-info-window>
  </google-map>
</div>

Answer 1

Try with the styles property of the MapOptions interface. Like this:

options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    scrollwheel: true,
    maxZoom: 18,
    minZoom: 10,
    streetViewControl: false,
    fullscreenControl: false,
    styles: [...]
  };

It could gets a bit annoying styling it detailed. You can generate a set of styles from this Styling Wizard (it also have a Landmarks slide to remove them gradually, then just export the styles array).