Utilizing data-driven styling for boundaries in Google Maps Javascript API V3 is a fantastic feature that appears to be compatible with all map types such as terrain, satellite, and hybrid. Nevertheless, I have encountered difficulties in making it visible on map types other than roadmap.
Upon changing the map type in this example, there is dynamic alteration of the mapTypeId, triggering this function behind the scenes 👇
map.setMapTypeId('terrain');
The transition between "Map" and "Satellite" looks like this 👇
I desire to observe the purple boundary layer also on the satellite map. Therefore, I contemplated if altering the default mapTypeId upon map instantiation would solve the issue 👇
map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: 20.773, lng: -156.01 }, // Hana, HI
zoom: 12,
mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
mapTypeId: "satellite" // 👈 Thought this might work
});
Alas! It did not succeed... The boundary remains visible solely on the roadmap and not on the satellite map.
There must exist a method to retain the visibility of the data-styled boundary layer when switching map types, but what could it be?