Adding style to Angular2 Google Maps

Question

Hi I am new to Angular2/Typescript and I am trying to style a map that I added to my Angular2 project by using the Angular2 Google Maps Components but I can´t figure out how to use its not yet documented MapTypeStyle Interface. How do I use it in my module and the html? The map module works but I don´t get the styles applied. Any help appreciated.

The according Google MapsTypeStyle Reference

html:

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

module (excerpt)

export class GmapComponent implements OnInit {

  title: string = 'Current Location';
  lat: number = 50.937531;
  lng: number = 6.960278600000038;
  constructor() { }

  ngOnInit() {
  }
}

Answer 1

The docs aren't very useful, so I had to dig into the code for the component.

<sebm-google-map [latitude]="lat" [longitude]="lng" [styles]="styles">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

Just adding styles should work, where styles is of the type MapTypeStyle[] which is declared here.

Try defining styles as something like:

let styles = [{
  "featureType": "water",
  "stylers": [{
      "color": "#ff0000"
    }]
}];

That should make your water red, but I haven't tested this myself yet, I'm just basing it off the code.