MapConductorConfigurar Google Maps
Aquí se muestran los pasos para usar Google Maps en la web desde MapConductor. La API de JavaScript de Google Maps se carga dinámicamente, por lo que no es necesario escribir etiquetas script. Se usan vistas diferentes para 2D y 3D.
Antes de empezar
Obtener una clave de API
- Habilite la API de JavaScript de Maps en Google Cloud Console.
- Cree una clave de API en "Credenciales".
- Restrinja la clave al referer HTTP del dominio de entrega.
Instalar
La API de JavaScript de Google Maps se carga dinámicamente con @googlemaps/js-api-loader. Este cargador se incluye en el paquete, por lo que no es necesario instalarlo por separado ni cargar CSS.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsPasar la clave a un enlace de estado
Pase la clave a un enlace de estado, no a los props del componente de vista. Si se coloca en los props, se mezclará en los registros y las instantáneas de las pruebas.
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});Alternar entre 2D y 3D
Google Maps tiene dos pilas y MapConductor proporciona una vista diferente para cada una. Ambas comparten el mismo objeto de estado. Si se establece mapId, los marcadores del lado 2D se representan con AdvancedMarkerElement; si no, se convierten en marcadores tradicionales.
// Classic 2D map (google.maps.Map)
<GoogleMapView2D state={mapState} mapId="YOUR_MAP_ID" />
// True 3D camera (google.maps.maps3d.Map3DElement)
<GoogleMapView state={mapState} mapId="YOUR_MAP_ID" version="alpha" />VERIFICAR
Lo que deberías ver
Cuando aparezca un mapa centrado en Tokio y se coloque un marcador, habrá terminado.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<GoogleMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</GoogleMapView2D>
);
}Objeto de estado
Los parámetros que recibe useGoogleMapViewState.
useGoogleMapViewState({
id?: string;
apiKey?: string; // required in practice
mapId?: string; // Advanced Markers / cloud styling
mapDesignType?: GoogleMapDesignType; // default GoogleMapDesign.Normal
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})Diseños de mapa
GoogleMapDesign corresponde a los tipos de mapas de Google.
Solución de problemas
El mapa no aparece
- Verifique si la clave se pasa al hook de estado o si se puede leer la variable de entorno.
- En la consola, verifique si la restricción de referer de la clave coincide con el dominio de entrega real.
La vista 3D lanza una excepción
- Verifique si está pasando Terrain o None a `mapDesignType`. 3D solo admite Normal, Hybrid y Satellite.
- Verifique si está pasando `version="alpha"`.
El mapa se inicializa dos veces solo durante el desarrollo
- React StrictMode ejecuta el efecto dos veces. Como cada proveedor está diseñado para detectar esto y descartar uno, no es necesario quitar StrictMode.
Siguiente
En la vista 3D, el rango de la cámara se ajusta según el tamaño de la ventana, por lo que la apariencia del zoom se mantiene uniforme incluso si cambia el tamaño de la pantalla.