I can’t control the lables display in satellite or hybrid view, but it work well when I not specific mapTypeId.
The styles not take effect if that mapTypeId is in satellite or hybrid.
Any help, thanks
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
"marker",
);
const map = new Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 34.84555, lng: -111.8035 },
mapTypeId: 'satellite',
disableDefaultUI: true,
mapId: "4504f8b37365c3d0",
// Disable various map features to only show city names.
styles: [
{
featureType: "all",
elementType: "labels",
stylers: [{ visibility: "off" }],
},
{
featureType: "administrative",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
{
featureType: "administrative.locality",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
],
});
I tried to add disableDefaultUI: true,
but it doesn’t work