MapConductorGoogle Maps का सेटअप
यह MapConductor से Google Maps को Web पर उपयोग करने की प्रक्रिया है। Google Maps JavaScript API गतिशील रूप से लोड होता है, इसलिए आपको script टैग लिखने की आवश्यकता नहीं है। 2D और 3D के लिए अलग-अलग विचार (views) का उपयोग किया जाता है।
शुरू करने से पहले
API कुंजी प्राप्त करें
- Google Cloud Console में Maps JavaScript API को सक्षम करें।
- "Credentials" (प्रमाणपत्र) से API कुंजी बनाएं।
- कुंजी को डिलीवरी डोमेन के HTTP रेफरर तक सीमित करें।
इंस्टॉल करें
Google Maps JavaScript API को @googlemaps/js-api-loader द्वारा गतिशील रूप से लोड किया जाता है। यह लोडर पैकेज में शामिल है, इसलिए आपको इसे अलग से इंस्टॉल करने की आवश्यकता नहीं है, न ही CSS लोड करने की आवश्यकता है।
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsकुंजी को स्थिति हुक में पास करें
कुंजी को विचार (view) component के props के बजाय स्थिति हुक (state hook) में पास करें। यदि आप इसे props में रखते हैं, तो यह टेस्ट लॉग और स्नैपशॉट में मिश्रित हो जाएगी।
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 }),
});2D और 3D का उपयोग करना
Google Maps में दो स्टैक होते हैं, और MapConductor प्रत्येक के लिए अलग-अलग विचार प्रदान करता है। दोनों एक ही स्थिति वस्तु (state object) साझा करते हैं। mapId सेट करने पर 2D साइड के मार्कर AdvancedMarkerElement के साथ बनाए जाते हैं, और सेट न करने पर पारंपरिक मार्कर बन जाते हैं।
// 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" />जाँच
आपको क्या दिखना चाहिए
टोक्यो को केंद्र में रखकर नक्शा प्रदर्शित होना चाहिए और एक मार्कर लगा होना चाहिए, यही पूर्णता है।
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>
);
}स्टेट ऑब्जेक्ट
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
})मैप डिज़ाइन
GoogleMapDesign Google के मैप प्रकारों के अनुरूप है।
समस्या निवारण
नक्शा प्रदर्शित नहीं हो रहा है
- यह जांचें कि क्या कुंजी स्थिति हुक में पारित की गई है या क्या पर्यावरण चर पढ़ा जा सकता है।
- Console में जांचें कि क्या कुंजी की रेफरर सीमा वास्तविक वितरण डोमेन से मेल खाती है।
3D दृश्य एक अपवाद फेंक रहा है
- जांचें कि क्या आप mapDesignType में Terrain या None पास कर रहे हैं। 3D केवल Normal, Hybrid, और Satellite के लिए है।
- जांचें कि क्या आप version="alpha" पास कर रहे हैं।
विकास के दौरान नक्शा दो बार प्रारंभ होता है
- React StrictMode effect को दो बार निष्पादित करता है। प्रत्येक प्रदाता इसका पता लगाता है और एक को छोड़ देता है, इसलिए आपको StrictMode को हटाने की आवश्यकता नहीं है।
आगे
3D दृश्य में, कैमरे की range को विंडो के आकार बदलने के अनुसार समायोजित किया जाता है, इसलिए स्क्रीन के आकार बदलने पर भी ज़ूम दिखने का तरीका समान रहता है।