MapConductorGoogle Maps einrichten
Hier finden Sie die Schritte zur Verwendung von Google Maps im Web über MapConductor. Die Google Maps JavaScript API wird dynamisch geladen, sodass kein script-Tag geschrieben werden muss. 2D und 3D verwenden unterschiedliche Ansichten.
Bevor Sie beginnen
API-Schlüssel abrufen
- Aktivieren Sie die Maps JavaScript API in der Google Cloud Console.
- Erstellen Sie einen API-Schlüssel unter „Anmeldedaten“.
- Beschränken Sie den Schlüssel auf den HTTP-Referer der Bereitstellungsdomäne.
Installieren
Die Google Maps JavaScript API wird dynamisch mit @googlemaps/js-api-loader geladen. Dieser Loader ist im Paket enthalten, sodass Sie ihn nicht separat installieren und auch kein CSS laden müssen.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsSchlüssel an State-Hook übergeben
Der Schlüssel wird an einen State-Hook übergeben, nicht an die props der Ansichts-Komponente. Andernfalls würde er in Testprotokollen und Snapshots erscheinen.
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 }),
});Zwischen 2D und 3D wechseln
Google Maps verfügt über zwei Stacks und MapConductor bietet für jeden eine eigene Ansicht. Beide teilen sich dasselbe Statusobjekt. Wenn mapId festgelegt ist, werden Marker auf der 2D-Seite mit AdvancedMarkerElement gerendert; wenn nicht, werden die herkömmlichen Marker verwendet.
// 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" />PRÜFEN
Was Sie sehen sollten
Wenn eine Karte mit Zentrum auf Tokio angezeigt wird und ein Marker gesetzt ist, sind Sie fertig.
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>
);
}Statusobjekt
Die Parameter, die useGoogleMapViewState empfängt.
useGoogleMapViewState({
id?: string;
apiKey?: string; // required in practice
mapId?: string; // Advanced Markers / cloud styling
mapDesignType?: GoogleMapDesignType; // default GoogleMapDesign.Normal
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})Kartendesigns
GoogleMapDesign entspricht den Google-Kartentypen.
Fehlerbehebung
Die Karte wird nicht angezeigt
- Überprüfen Sie, ob der Schlüssel an den Status-Hook übergeben wird oder ob die Umgebungsvariable gelesen werden kann.
- Überprüfen Sie in der Konsole, ob die Referrer-Einschränkung des Schlüssels mit der tatsächlichen Lieferdomäne übereinstimmt.
Die 3D-Ansicht löst eine Ausnahme aus
- Überprüfen Sie, ob Sie Terrain oder None an `mapDesignType` übergeben. 3D unterstützt nur Normal, Hybrid und Satellite.
- Überprüfen Sie, ob Sie `version="alpha"` übergeben.
Die Karte wird während der Entwicklung doppelt initialisiert
- React StrictMode führt den Effekt zweimal aus. Da jeder Provider dies erkennt und einen davon verwirft, müssen Sie StrictMode nicht entfernen.
Weiter
In der 3D-Ansicht wird der Bereich der Kamera an die Fenstergröße angepasst, sodass die Zoomdarstellung auch bei Änderung der Bildschirmgröße konsistent bleibt.