Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#905 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
api, frontend

Línea de trabajo

Comienza con el manejo estático de mapTypeId del componente Map y con las rutas mapTypeId/onMapTypeIdChanged descritas en el informe. Reproduce el ejemplo mínimo en un área de imágenes de 45° y comprueba después si la reconciliación restaura el valor inicial; se considera terminado cuando el control nativo de Map puede cambiar de hybrid o satellite a roadmap sin volver atrás.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)

Lenguaje dominante
TypeScript
Estrellas
1.9k
Forks
195
Merge medio
2 d 11 h
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de visgl/react-google-maps

Todos los issues de visgl/react-google-maps

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.