CODEWITHSUNDEEP
angulargoogle-mapsangular-google-maps
slipperypete
slipperypete

Reputation: 6284

How to change the color of land, and water of google maps with angular?

I am using this angular component for google maps https://angular-maps.com/api-docs/agm-core . I swear one day I thought I saw that you can change the color of water, and land with this. But when I look at the documentation I dont see that. Is it possible to change the color of land and water on a google map with this angular module? If so how?

Thanks!

Upvotes: 0

Views: 4839

Answers (1)

syciphj
syciphj

Reputation: 996

The Google Maps Javascript API has documentation on how to style your map.

Agm also surfaces the same styles property. You can find that in their documentation

So depending on how you instantiate your agm map, all you have to do is pass an array with the custom style settings to your agm map component.

Using the plunker agm demo as a base, and if creating a custom component just add [styles]= "styles" in the component's template like so:

<sebm-google-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)"
  [styles]= "styles">

Then declare your styles array like so:

styles: any[] = [
  {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
]

See the actual plunker here (just insert your own API key over at @NgModule setup)

You can even pass dynamic map styles. See this related SO

Upvotes: 2

Related Questions