Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#905 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
api, frontend

Direzione di ricerca

Inizia dalla gestione statica di mapTypeId del componente Map e dai percorsi mapTypeId/onMapTypeIdChanged descritti nel report. Riproduci l'esempio minimo in un'area con immagini a 45°, quindi verifica se la riconciliazione ripristina il valore iniziale; il lavoro è completato quando il controllo Map nativo può passare da hybrid o satellite a roadmap senza tornare indietro.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
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)

Lingua principale
TypeScript
Stelle
1.9k
Fork
195
Merge medio
2g 18h
PR unite (30g)
15

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di visgl/react-google-maps

Tutte le issue di visgl/react-google-maps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.