CODEWITHSUNDEEP
javascriptdatetimegoogle-maps-api-3
leopoldus11
leopoldus11

Reputation: 21

Google Maps API | How to change map style (retro to night mode) when it's dark outside (time-dependant)?

I'm currently working on a website project and for some reason, my client wants the embedded map to change style when it's dark outside. (Styles: retro and night mode)

I just implemented the retro style for the map using the exact same code base I found at this GOOGLE website.

The styles for the night mode one can look up HERE.

My question: How can I toogle between those two map styles regarding a specific time that I can either set myself (i.e. 8pm) or how can one change the style depending on the sunrise/sunset in her or his specific time-zone?

I didn't find any information on this topic in my online research and also not on google's developer sites.

Any help would be kindly appreciated.

Upvotes: 2

Views: 2148

Answers (1)

ValLeNain
ValLeNain

Reputation: 2304

It is not a Google Maps issue. You just need to call map.setMapTypeId with the correct id when the condition is met.

e.g.

if(your_condition) {
  map.setMapTypeId(my_custom_id);
}

Note that the condition will be only checked once in this case (so if the user does not refresh the page, he won't see any change - use setInterval to check the condition every x seconds). To help you deal with dates, the MomentJS library is very useful (and knows how to deal with timezones too).

If you want to calculate sunrise/sunset time, there are libraries for that: https://github.com/mourner/suncalc

Upvotes: 2

Related Questions