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.

This is working for me. ☺ :-p

<sebm-google-map *ngIf="map" [latitude]="placeLat" [longitude]="placeLng" [scrollwheel]="false" [zoom]="zoom" [disableDefaultUI]="true" [styles]='[            {                elementType : "labels.icon",                stylers : [{                  visibility : "off"                }]            }]'>

My final working solution. But I still don´t understand where and how MapTypeStyle Interface is used.

html adding [styles]="customStyle"

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

component (excerpt) adding public customStyle = [{ "JSON style declaration goes here" }]

export class GmapComponent implements OnInit {  public customStyle = [    {      "elementType": "geometry",      "stylers": [        {          "hue": "#ff4400"        },        {          "saturation": -100        },        {          "lightness": -4        },        {          "gamma": 0.72        }      ]    },    {      "featureType": "road",      "elementType": "labels.icon"    },    {      "featureType": "landscape.man_made",      "elementType": "geometry",      "stylers": [        {          "hue": "#0077ff"        },        {          "gamma": 3.1        }      ]    },    {      "featureType": "water",      "stylers": [        {          "hue": "#00ccff"        },        {          "gamma": 0.44        },        {          "saturation": -33        }      ]    },    {      "featureType": "poi.park",      "stylers": [        {          "hue": "#44ff00"        },        {          "saturation": -23        }      ]    },    {      "featureType": "water",      "elementType": "labels.text.fill",      "stylers": [        {          "hue": "#007fff"        },        {          "gamma": 0.77        },        {          "saturation": 65        },        {          "lightness": 99        }      ]    },    {      "featureType": "water",      "elementType": "labels.text.stroke",      "stylers": [        {          "gamma": 0.11        },        {          "weight": 5.6        },        {          "saturation": 99        },        {          "hue": "#0091ff"        },        {          "lightness": -86        }      ]    },    {      "featureType": "transit.line",      "elementType": "geometry",      "stylers": [        {          "lightness": -48        },        {          "hue": "#ff5e00"        },        {          "gamma": 1.2        },        {          "saturation": -23        }      ]    },    {      "featureType": "transit",      "elementType": "labels.text.stroke",      "stylers": [        {          "saturation": -64        },        {          "hue": "#ff9100"        },        {          "lightness": 16        },        {          "gamma": 0.47        },        {          "weight": 2.7        }      ]    }  ];  title: string = 'Current Location';  lat: number = 50.937531;  lng: number = 6.960278600000038;  constructor() {  }  ngOnInit() {  }}