[Bug] MapTypeControl cannot switch from hybrid/satellite to roadmap when initialized with hybrid/satellite in 45° imagery areas

[ihatem]

Description

When a map is initialized with mapTypeId="hybrid" or mapTypeId="satellite" and the user is viewing a location with 45° imagery available, clicking the "Map" button in the native mapTypeControl fails to switch to roadmap view.

The map briefly flickers (appears to attempt the switch) but immediately reverts back to hybrid/satellite view. This only occurs in areas where 45° imagery is available and at zoom levels where tilt is active.

Workarounds

Option 1: Controlled state with onMapTypeIdChanged

Using React state to manage mapTypeId and syncing it via onMapTypeIdChanged resolves the issue:

import { APIProvider, Map, type MapProps } from '@vis.gl/react-google-maps'
import { useState } from 'react'

const MAP_ID = 'YOUR_MAP_ID' // Must have vector maps enabled

function App() {
  const [mapTypeId, setMapTypeId] = useState<MapProps['mapTypeId']>('hybrid')

  return (
    <APIProvider apiKey="YOUR_API_KEY">
      <Map
        style={{ width: '100%', height: '500px' }}
        defaultCenter={{ lat: 48.8630, lng: 2.3622 }} // Paris 3e - has 45° imagery
        defaultZoom={18}
        mapTypeId={mapTypeId}
        mapTypeControl
        mapId={MAP_ID}
        onMapTypeIdChanged={(event) => setMapTypeId(event.map.getMapTypeId())}
      />
    </APIProvider>
  )
}

Option 2: Initialize as roadmap and switch after mount

Initializing without mapTypeId prop and programmatically switching to hybrid after mount also works:

import { APIProvider, Map, useMap } from '@vis.gl/react-google-maps'
import { useEffect } from 'react'

const MAP_ID = 'YOUR_MAP_ID' // Must have vector maps enabled

const SwitchToHybridOnMount = () => {
  const map = useMap()

  useEffect(() => {
    if (!map) return
    const timer = setTimeout(() => {
      map.setMapTypeId('hybrid')
    }, 50)
    return () => clearTimeout(timer)
  }, [map])

  return null
}

function App() {
  return (
    <APIProvider apiKey="YOUR_API_KEY">
      <Map
        style={{ width: '100%', height: '500px' }}
        defaultCenter={{ lat: 48.8630, lng: 2.3622 }} // Paris 3e - has 45° imagery
        defaultZoom={18}
        // Note: mapTypeId prop must NOT be provided (even undefined won't work)
        mapTypeControl
        mapId={MAP_ID}
      >
        <SwitchToHybridOnMount />
      </Map>
    </APIProvider>
  )
}

Observations

• ✅ Works: Initialize with roadmap or terrain → switch to hybrid → switch back to roadmap
• ❌ Fails: Initialize with hybrid or satellite → cannot switch to roadmap (in 45° areas)
• ✅ Works: Same scenario in non-45° areas (low zoom or locations without 45° imagery)
• ✅ Works: Native Google Maps API without react-google-maps wrapper (tested via Google's demo)
• ✅ Works: Using controlled state with onMapTypeIdChanged to sync mapTypeId
• ✅ Works: Not providing mapTypeId prop and switching via map.setMapTypeId() after mount

Possible causes

• When mapTypeId is passed as a static prop, the library may be forcing it back to the initial value on every camera/tilt change event
• The internal reconciliation between Google Maps state and React props seems to conflict with the automatic tilt behavior in 45° areas
• Using controlled state via onMapTypeIdChanged allows the component to accept the new mapTypeId from Google Maps instead of reverting it
• Not providing the mapTypeId prop at all lets Google Maps maintain full control over the map type state

Steps to Reproduce

1. Initialize a map with mapTypeId="hybrid" or mapTypeId="satellite" as a static prop (not via useState)
2. Navigate to a location with 45° imagery (e.g., Paris 3e Arrondissement)
3. Zoom in until the 45° tilt view activates
4. Click the "Map" button in the mapTypeControl
5. Expected: Map switches to roadmap view
6. Actual: Map flickers briefly then stays in hybrid/satellite view

Minimal reproduction

import { APIProvider, Map } from '@vis.gl/react-google-maps'

const MAP_ID = 'YOUR_MAP_ID' // Must have vector maps enabled

function App() {
  return (
    <APIProvider apiKey="YOUR_API_KEY">
      <Map
        style={{ width: '100%', height: '500px' }}
        defaultCenter={{ lat: 48.8630, lng: 2.3622 }} // Paris 3e - has 45° imagery
        defaultZoom={18}
        mapTypeId="hybrid" // Bug occurs with static hybrid or satellite
        mapTypeControl
        mapId={MAP_ID}
      />
    </APIProvider>
  )
}

Environment

• Library version: ^1.7.1
• Google maps version: 3.62
• Browser and Version: Firefox 147.0.1
• OS: macOS Tahoe 26.2

Logs

As of version 3.62, Maps JavaScript API satellite and hybrid map types will no longer automatically switch to 45° Imagery at higher zoom levels. For more info, see https://developers.google.com/maps/deprecations

(I know it's outdated, but as long as it works, I'd like to use it)