खास जानकारी
Google Maps Platform, वेब (JS, TS), Android, और iOS के लिए उपलब्ध है. यह जगहों, दिशाओं, और दूरी के बारे में जानकारी पाने के लिए, वेब सेवाओं के एपीआई भी उपलब्ध कराता है. इस गाइड में दिए गए सैंपल, एक प्लैटफ़ॉर्म के लिए लिखे गए हैं. हालांकि, अन्य प्लैटफ़ॉर्म पर लागू करने के लिए, दस्तावेज़ के लिंक दिए गए हैं.
जब लोग आपके प्रॉडक्ट ऑनलाइन देखते हैं, तो वे अपने ऑर्डर को पाने का सबसे अच्छा और आसान तरीका ढूंढते हैं. Google, प्रॉडक्ट लोकेटर को लागू करने के लिए गाइड और उसे पसंद के मुताबिक बनाने के सुझाव देता है. Google का सुझाव है कि प्रॉडक्ट लोकेटर के लिए, Google Maps Platform API का सबसे सही कॉम्बिनेशन इस्तेमाल करें, ताकि उपयोगकर्ताओं को बेहतरीन अनुभव मिल सके.
इस गाइड में दिए गए निर्देशों का पालन करके, खरीदारों को आपके प्रॉडक्ट ढूंढने के लिए ज़रूरी जानकारी दिखाई जा सकती है. साथ ही, उन्हें उस स्टोर का रास्ता बताया जा सकता है जहां उनका प्रॉडक्ट उपलब्ध है. भले ही, वे गाड़ी चला रहे हों, साइकल चला रहे हों, पैदल चल रहे हों या सार्वजनिक परिवहन का इस्तेमाल कर रहे हों.
एपीआई चालू करें
प्रॉडक्ट लोकेटर को लागू करने के लिए, आपको Google Cloud Console में ये एपीआई चालू करने होंगे. यहां दिए गए हाइपरलिंक पर क्लिक करके, Google Cloud Console पर जाएं. इसके बाद, चुने गए प्रोजेक्ट के लिए हर एपीआई को चालू करें:
सेटअप के बारे में ज़्यादा जानकारी के लिए, Google Maps Platform का इस्तेमाल शुरू करना लेख पढ़ें.
लागू करने के बारे में जानकारी देने वाली गाइड के सेक्शन
यहां इन सुविधाओं को लागू करने और उन्हें पसंद के मुताबिक बनाने के बारे में बताया गया है:
- सही के निशान वाला आइकॉन, लागू करने का मुख्य चरण है.
- स्टार आइकॉन को पसंद के मुताबिक बनाया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. हमारा सुझाव है कि आप ऐसा करें, ताकि समाधान को बेहतर बनाया जा सके.
| स्टोर की जगहों को Google Maps Platform की जगहों से जोड़ना | किसी स्टोर की जगह की जानकारी को Google Maps Platform में मौजूद किसी जगह की जानकारी से मैच करें. | |
| उपयोगकर्ता की जगह की जानकारी का पता लगाना | सभी प्लैटफ़ॉर्म पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, टाइप करते समय पते का सुझाव देने की सुविधा जोड़ें. साथ ही, कम से कम कीस्ट्रोक में पते की सटीकता को बेहतर बनाएं. | |
| सबसे नज़दीकी स्टोर की पहचान करना | यात्रा की दूरी और यात्रा में लगने वाले समय का हिसाब लगाएं. इसके लिए, यात्रा शुरू करने की कई जगहों और मंज़िलों की जानकारी दें. साथ ही, यात्रा के अलग-अलग तरीके बताएं. जैसे, पैदल चलना, ड्राइविंग करना, सार्वजनिक परिवहन (बस, मेट्रो वगैरह) या साइकल चलाना. | |
| स्टोर की जानकारी दिखाना | अपने स्टोर के बारे में ज़्यादा जानकारी दिखाएं, ताकि लोग उन्हें आसानी से ढूंढ सकें. | |
| नेविगेशन के निर्देश देना | पैदल चलने, ड्राइविंग, साइकल चलाने, और बस, मेट्रो वगैरह का इस्तेमाल करने जैसे परिवहन के अलग-अलग तरीकों का इस्तेमाल करके, शुरुआती जगह से मंज़िल तक पहुंचने के लिए रास्ते की जानकारी का डेटा पाएं. | |
| मोबाइल पर दिशा-निर्देश भेजें | अपने वेबपेज पर दिशा-निर्देश दिखाने के साथ-साथ, किसी उपयोगकर्ता के फ़ोन पर भी दिशा-निर्देश भेजे जा सकते हैं. इससे वह Google Maps का इस्तेमाल करके, रास्ते में नेविगेट कर पाएगा. | |
| इंटरैक्टिव मैप पर अपनी जगहें दिखाना | अपनी जगहों को हाइलाइट करने के लिए, पसंद के मुताबिक मैप मार्कर बनाएं. साथ ही, मैप को अपने ब्रैंड के रंगों के हिसाब से स्टाइल करें. मैप पर खास लोकप्रिय जगहों (पीओआई) को दिखाएं या छिपाएं, ताकि लोगों को मैप समझने में आसानी हो. साथ ही, मैप पर पीओआई की डेंसिटी को कंट्रोल करें, ताकि मैप पर ज़्यादा जानकारी न दिखे. | |
| कस्टम जगह की जानकारी के डेटा को Place Details के साथ जोड़ना | Place Details के साथ, अपनी पसंद के मुताबिक जगह की जानकारी को जोड़ें. इससे उपयोगकर्ताओं को फ़ैसले लेने के लिए, डेटा का एक बड़ा सेट मिलेगा. |
स्टोर की जगहों को Google Maps Platform की जगहों से जोड़ना
जगह के आईडी पाना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Places API (नया प्रॉडक्ट) | इन भाषाओं में भी उपलब्ध है: JavaScript |
आपके पास अपनी दुकानों का डेटाबेस हो सकता है. इसमें बुनियादी जानकारी शामिल होती है. जैसे, जगह का नाम, उसका पता, और उसका फ़ोन नंबर. आपको इस डेटाबेस को Google Maps Platform में किसी जगह से जोड़ना हो सकता है, ताकि आपके उपयोगकर्ता उन जगहों से प्रॉडक्ट पिक अप कर सकें. Google Maps Platform के पास किसी जगह के बारे में मौजूद जानकारी को फ़ेच करने के लिए, अपने डेटाबेस में मौजूद हर स्टोर के लिए जगह का आईडी ढूंढें. इस जानकारी में भौगोलिक निर्देशांक और उपयोगकर्ता से मिली जानकारी शामिल होती है.
Places API (नया वर्शन) में
टेक्स्ट से खोजने की सुविधा (नया वर्शन) वाले एंडपॉइंट को कॉल किया जा सकता है. साथ ही, फ़ील्ड मास्क में सिर्फ़ places.id फ़ील्ड का अनुरोध किया जा सकता है. इससे टेक्स्ट से खोजने की सुविधा वाले एसेंशियल आईडी का एसकेयू ट्रिगर होता है.
यहां Google के लंदन ऑफ़िस के लिए जगह के आईडी का अनुरोध करने का उदाहरण दिया गया है:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'अपने डेटाबेस में, स्टोर के अन्य डेटा के साथ इस जगह के आईडी को सेव किया जा सकता है. साथ ही, इसका इस्तेमाल स्टोर के बारे में जानकारी का अनुरोध करने के लिए किया जा सकता है. जगह के आईडी का इस्तेमाल करके, जियोकोडिंग करने, Place Details पाने, और जगह तक पहुँचने का रास्ता जानने के लिए, यहाँ दिए गए निर्देशों का पालन करें.
अपनी जगहों के जियोकोड जनरेट करना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Geocoding API | इन भाषाओं में भी उपलब्ध है: JavaScript |
अगर आपके स्टोर के डेटाबेस में सड़कों के पते हैं, लेकिन भौगोलिक निर्देशांक नहीं हैं, तो Geocoding API का इस्तेमाल करें. इससे आपको उस पते का अक्षांश और देशांतर मिलेगा. इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि आपके ग्राहक के सबसे नज़दीक कौनसे स्टोर हैं. स्टोर को सर्वर साइड पर जियोकोड किया जा सकता है. साथ ही, अक्षांश और देशांतर को अपने डेटाबेस में सेव किया जा सकता है. इसके अलावा, कम से कम हर 30 दिन में डेटा को रीफ़्रेश किया जा सकता है.
यहां Geocoding API का इस्तेमाल करके, Google के लंदन ऑफ़िस के लिए मिले प्लेस आईडी का अक्षांश और देशांतर पाने का उदाहरण दिया गया है:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
उपयोगकर्ता की जगह की जानकारी का पता लगाना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Maps JavaScript API में जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा | इनके लिए भी उपलब्ध है: Android | iOS |
प्रॉडक्ट लोकेटर में, उपयोगकर्ता की शुरुआती जगह का पता लगाना एक अहम कॉम्पोनेंट है. उपयोगकर्ता को शुरुआती जगह की जानकारी देने के लिए, दो विकल्प दिए जा सकते हैं: खोज की जगह की जानकारी टाइप करना या वेब ब्राउज़र की जियोलोकेशन या मोबाइल लोकेशन सेवाओं को अनुमतियां देना.
ऑटोकंप्लीट की सुविधा का इस्तेमाल करके, टाइप की गई एंट्री मैनेज करना
आज के उपयोगकर्ता, Google Maps के उपभोक्ता वर्शन पर ऑटोकंप्लीट टाइप-अहेड सुविधा का इस्तेमाल करने के आदी हैं. इस सुविधा को किसी भी ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. इसके लिए, मोबाइल डिवाइसों और वेब पर Google Maps Platform Places की लाइब्रेरी का इस्तेमाल किया जाता है. जब कोई उपयोगकर्ता पता टाइप करता है, तो ऑटोकंप्लीट की सुविधा, विजेट का इस्तेमाल करके बाकी जानकारी भर देती है. Place Autocomplete Data API का इस्तेमाल करके, सीधे तौर पर अपने ऐप्लिकेशन में भी ऑटोमैटिक तरीके से भरने की सुविधा दी जा सकती है.
यहां दिए गए उदाहरण में, Maps JavaScript API स्क्रिप्ट के यूआरएल में libraries=places,marker पैरामीटर जोड़कर, अपनी साइट में जगहों और मार्कर की लाइब्रेरी जोड़ें.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>इसके बाद, अपने पेज पर एक कंटेनर एलिमेंट जोड़ें. PlaceAutocompleteElement विजेट को यहां जोड़ा जाएगा:
<div id="autocomplete-container"></div>आखिर में, PlaceAutocompleteElement विजेट को शुरू करें और इसे कंटेनर में जोड़ें. includedPrimaryTypes: ["geocode"] की मदद से, जगह की जानकारी अपने-आप भरने की सुविधा से मिलने वाले सुझावों को सीमित करने पर, विजेट को सड़क के पते, आस-पड़ोस, शहरों, और पिन कोड को स्वीकार करने के लिए कॉन्फ़िगर किया जाता है. इससे उपयोगकर्ता, अपनी जगह की जानकारी देने के लिए किसी भी लेवल की जानकारी डाल सकते हैं. जब कोई उपयोगकर्ता किसी पूर्वानुमान को चुनता है, तो gmp-select इवेंट ट्रिगर होता है. इसके बाद, place.fetchFields() को कॉल करके, location फ़ील्ड का अनुरोध किया जा सकता है. इस फ़ील्ड में, उपयोगकर्ता की जगह की अक्षांश और देशांतर की जानकारी होती है. इन मैप कोऑर्डिनेट का इस्तेमाल करके, यह बताया जाएगा कि आपकी जगहों का मूल जगह से क्या संबंध है.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
इस उदाहरण में, उपयोगकर्ता के पते को चुनने के बाद, searchFromOrigin() फ़ंक्शन शुरू होता है. यह सुविधा, खोज के नतीजों में मिली जगह की जानकारी का इस्तेमाल करती है. यह जगह, उपयोगकर्ता की जगह की जानकारी होती है. इसके बाद, यह सुविधा उन निर्देशांकों के आधार पर सबसे नज़दीकी जगहों की खोज करती है. इन निर्देशांकों को मूल जगह माना जाता है. इस बारे में, सबसे नज़दीकी स्टोर की पहचान करना सेक्शन में बताया गया है.
अपने ऐप्लिकेशन में जगह की जानकारी अपने-आप भरने की सुविधा जोड़ने के बारे में वीडियो देखने के लिए, इसे बड़ा करें:
वेबसाइट
Android ऐप्लिकेशन
iOS ऐप्लिकेशन
ब्राउज़र की जियोलोकेशन सुविधा का इस्तेमाल करना
एचटीएमएल5 ब्राउज़र के जियोलोकेशन की सुविधा का अनुरोध करने और उसे मैनेज करने के लिए, मेरी जगह की जानकारी का इस्तेमाल करें विंडो चालू करने का तरीका देखें:
सबसे नज़दीकी स्टोर की पहचान करना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Maps JavaScript API की Routes Library | यह भी उपलब्ध है: Routes API |
उपयोगकर्ता की जगह की जानकारी मिलने के बाद, इसकी तुलना अपने स्टोर की जगहों से की जा सकती है. Maps JavaScript API की Routes Library में मौजूद RouteMatrix
क्लास या Routes API में मौजूद Compute Route Matrix सुविधा का इस्तेमाल करके, उपयोगकर्ताओं को ड्राइविंग में लगने वाले समय या सड़क की दूरी के हिसाब से सबसे सही जगह चुनने में मदद मिलती है.
जगहों की सूची को व्यवस्थित करने का स्टैंडर्ड तरीका यह है कि उन्हें दूरी के हिसाब से क्रम से लगाया जाए. आम तौर पर, इस दूरी का हिसाब लगाने के लिए, उपयोगकर्ता से जगह तक की सीधी लाइन का इस्तेमाल किया जाता है. हालांकि, इससे गलत जानकारी मिल सकती है. ऐसा हो सकता है कि सीधी लाइन वाला रास्ता, किसी ऐसी नदी के ऊपर से जा रहा हो जिसे पार नहीं किया जा सकता या किसी ऐसी सड़क से होकर जा रहा हो जिस पर बहुत ज़्यादा ट्रैफ़िक हो. ऐसे में, किसी दूसरी जगह से होकर जाने वाला रास्ता ज़्यादा सुविधाजनक हो सकता है. यह तब ज़रूरी होता है, जब आपकी कई जगहें कुछ किलोमीटर के दायरे में हों.
RouteMatrix.computeRouteMatrix तरीके में, शुरुआती और मंज़िल की जगहों की सूची ली जाती है. इससे न सिर्फ़ यात्रा की दूरी का पता चलता है, बल्कि इन जगहों के बीच यात्रा में लगने वाले समय का भी पता चलता है. किसी उपयोगकर्ता के लिए, ऑरिजिन वह जगह होगी जहां वह फ़िलहाल है या उसकी यात्रा शुरू करने की जगह. वहीं, डेस्टिनेशन उन जगहों के नाम होंगे जहां उसे जाना है. शुरुआत और मंज़िल की जगह की जानकारी, निर्देशांकों के जोड़े, जगह के आईडी या पतों के तौर पर दी जा सकती है. RouteMatrix.computeRouteMatrix का इस्तेमाल, रूटिंग की प्राथमिकताओं के साथ किया जा सकता है. जैसे, TRAFFIC_AWARE का इस्तेमाल करके, ड्राइविंग के मौजूदा या आने वाले समय के हिसाब से नतीजे दिखाए जा सकते हैं.
यहां दिए गए उदाहरण में, Maps JavaScript API की Routes Library में RouteMatrix.computeRouteMatrix को कॉल किया गया है. इसमें उपयोगकर्ता की शुरुआती जगह और एक बार में ज़्यादा से ज़्यादा 25 स्टोर की जगहें तय की गई हैं.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
आस-पास की हर जगह के लिए, अपने इन्वेंट्री डेटाबेस के आधार पर प्रॉडक्ट के स्टॉक का स्टेटस दिखाया जा सकता है.
स्टोर की जानकारी दिखाना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Places Library, Maps JavaScript API | इन्हें भी इस्तेमाल किया जा सकता है: Android के लिए Places SDK | iOS के लिए Places SDK | Places API (नया) |
आपके पास Place Details जैसी ज़्यादा जानकारी शेयर करने का विकल्प होता है. जैसे, संपर्क जानकारी, खुले होने का समय, और मौजूदा स्थिति. इससे खरीदारों को अपनी पसंदीदा जगह चुनने या ऑर्डर पूरा करने में मदद मिलती है.
जगह की जानकारी पाने के लिए Maps JavaScript API को कॉल करने के बाद, जवाब को फ़िल्टर और रेंडर किया जा सकता है.
जगह की जानकारी का अनुरोध करने के लिए, आपको अपनी हर जगह का आईडी चाहिए होगा. अपनी जगह का आईडी पाने के लिए, जगह के आईडी पाना लेख पढ़ें.
जगह के बारे में ज़्यादा जानकारी के लिए किए गए इस अनुरोध में, जगह की क्लास का इस्तेमाल किया गया है. इससे Google London के प्लेस आईडी के लिए, नाम, कोऑर्डिनेट, वेबसाइट, फ़ोन नंबर, रेटिंग, और कारोबार के खुले होने का समय जैसी जानकारी मिलती है:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
प्रॉडक्ट लोकेटर को बेहतर बनाना
अपने कारोबार या उपयोगकर्ताओं की ज़रूरतों के हिसाब से, उपयोगकर्ता अनुभव को और बेहतर बनाया जा सकता है.
नेविगेशन के लिए दिशा-निर्देश देना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Maps JavaScript API की Routes Library | यह भी उपलब्ध है: Routes API Android और iOS पर इस्तेमाल की जाने वाली वेब सेवा. इसे सीधे तौर पर ऐप्लिकेशन से या रिमोट तरीके से सर्वर प्रॉक्सी के ज़रिए इस्तेमाल किया जा सकता है |
जब उपयोगकर्ताओं को आपकी साइट या ऐप्लिकेशन पर ही दिशा-निर्देश दिखाए जाते हैं, तो उन्हें आपकी साइट से बाहर जाने की ज़रूरत नहीं होती. साथ ही, उनका ध्यान अन्य पेजों पर नहीं भटकता या उन्हें मैप पर प्रतिस्पर्धी नहीं दिखते. Routes API की मदद से, ईको-फ़्रेंडली रास्तों का अनुरोध भी किया जा सकता है. इससे ईंधन या ऊर्जा की खपत का अनुमान लगाया जा सकता है. साथ ही, यात्रा के दौरान पर्यावरण पर पड़ने वाले असर को दिखाया जा सकता है.
Maps JavaScript API की Routes Library में मौजूद Route
क्लास में createPolylines() और createWaypointAdvancedMarkers() जैसे तरीके भी होते हैं. इनकी मदद से, नतीजों को प्रोसेस किया जा सकता है और उन्हें मैप पर दिखाया जा सकता है.
यहां मैप पर कोई रास्ता दिखाने का अनुरोध करने और उसे दिखाने का एक उदाहरण दिया गया है. सैंपल के बारे में ज़्यादा जानकारी के लिए, रास्ता पाना लेख पढ़ें.
मोबाइल पर दिशा-निर्देश भेजें
उपयोगकर्ताओं को किसी जगह पर पहुंचने में और आसानी हो, इसके लिए उन्हें दिशा-निर्देशों का लिंक टेक्स्ट या ईमेल किया जा सकता है. जब वे इस पर क्लिक करेंगे, तब उनके फ़ोन पर Google Maps ऐप्लिकेशन लॉन्च हो जाएगा. ऐसा तब होगा, जब उनके फ़ोन पर यह ऐप्लिकेशन इंस्टॉल होगा. अगर उनके फ़ोन पर यह ऐप्लिकेशन इंस्टॉल नहीं होगा, तो उनके डिवाइस के वेब ब्राउज़र में maps.google.com लोड हो जाएगा. इन दोनों सुविधाओं में, उपयोगकर्ता को मंज़िल तक पहुंचने के लिए, रास्ते के दिशा-निर्देश का इस्तेमाल करने का विकल्प मिलता है. इसमें आवाज़ से रास्ता बताने की सुविधा भी शामिल है.
Maps के यूआरएल का इस्तेमाल करके, यहां दिए गए यूआरएल की तरह दिशाओं का यूआरएल बनाएं. इसमें, यूआरएल के तौर पर कोड में बदले गए जगह के नाम को destination पैरामीटर के तौर पर और जगह के आईडी को destination_place_id पैरामीटर के तौर पर इस्तेमाल करें. Maps यूआरएल बनाने या इस्तेमाल करने के लिए कोई शुल्क नहीं लगता. इसलिए, आपको यूआरएल में एपीआई पासकोड शामिल करने की ज़रूरत नहीं है.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
आपके पास डेस्टिनेशन के पते के फ़ॉर्मैट में ही origin क्वेरी पैरामीटर देने का विकल्प होता है. हालांकि, इसे शामिल न करने पर, दिशा-निर्देश उपयोगकर्ता की मौजूदा जगह से शुरू होते हैं. यह जगह, उस जगह से अलग हो सकती है जहां उपयोगकर्ता, आपके प्रॉडक्ट लोकेटर ऐप्लिकेशन का इस्तेमाल कर रहा था. Maps के यूआरएल, अतिरिक्त क्वेरी पैरामीटर के विकल्प उपलब्ध कराते हैं. जैसे, travelmode और dir_action=navigate. इनका इस्तेमाल, नेविगेशन चालू करके दिशा-निर्देश लॉन्च करने के लिए किया जाता है.
क्लिक किए जा सकने वाले इस लिंक में, ऊपर दिए गए उदाहरण वाले यूआरएल को बढ़ाया गया है. इसमें origin को लंदन के फ़ुटबॉल स्टेडियम के तौर पर सेट किया गया है. साथ ही, travelmode=transit का इस्तेमाल करके डेस्टिनेशन तक पहुंचने के लिए, बस, मेट्रो वगैरह के रास्ते के लिए निर्देशों की जानकारी दी गई है.
इस यूआरएल को शामिल करके कोई टेक्स्ट या ईमेल भेजने के लिए, फ़िलहाल हमारा सुझाव है कि आप twilio जैसे किसी तीसरे पक्ष के ऐप्लिकेशन का इस्तेमाल करें. अगर App Engine का इस्तेमाल किया जा रहा है, तो एसएमएस या ईमेल भेजने के लिए, तीसरे पक्ष की कंपनियों का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, तीसरे पक्ष की सेवाओं का इस्तेमाल करके मैसेज भेजना लेख पढ़ें.
इंटरैक्टिव मैप पर अपनी जगहें दिखाना
डाइनैमिक मैप का इस्तेमाल करना
| इस उदाहरण में इनका इस्तेमाल किया गया है: Maps JavaScript API | इन्हें भी इस्तेमाल किया जा सकता है: Android | iOS |
लोकेटर, उपयोगकर्ता अनुभव का एक अहम हिस्सा होता है. हालांकि, कुछ साइटों पर सामान्य मैप भी नहीं होता. इसलिए, उपयोगकर्ताओं को आस-पास की जगह ढूंढने के लिए, साइट या ऐप्लिकेशन छोड़ना पड़ता है. इसका मतलब है कि जिन लोगों को अपनी ज़रूरत की जानकारी पाने के लिए, पेजों के बीच नेविगेट करना पड़ता है उन्हें अच्छा अनुभव नहीं मिलता. इसके बजाय, अपने ऐप्लिकेशन में मैप एम्बेड करके और उन्हें पसंद के मुताबिक बनाकर, इस सुविधा का बेहतर अनुभव पाया जा सकता है.
अपने पेज पर डाइनैमिक मैप जोड़ा जा सकता है. यह ऐसा मैप होता है जिसे उपयोगकर्ता घुमा सकते हैं, ज़ूम इन और आउट कर सकते हैं, और अलग-अलग जगहों और दिलचस्पी की जगहों के बारे में जानकारी पा सकते हैं. इसे कुछ लाइनों के कोड की मदद से जोड़ा जा सकता है.
सबसे पहले, आपको पेज में Maps JavaScript API शामिल करना होगा.
इसके लिए, अपने एचटीएमएल पेज में यहां दी गई स्क्रिप्ट को लिंक करें. इसमें libraries=marker शामिल है, ताकि मैप में ऐडवांस मार्कर जोड़े जा सकें.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>यूआरएल, JavaScript initMap फ़ंक्शन को रेफ़रंस करता है. यह फ़ंक्शन, पेज लोड होने पर चलता है. यूआरएल में, मैप की भाषा या क्षेत्र भी तय किया जा सकता है. इससे यह पक्का किया जा सकता है कि मैप को उस देश के हिसाब से सही तरीके से फ़ॉर्मैट किया गया हो जिसे टारगेट किया जा रहा है. क्षेत्र सेट करने से यह भी पक्का होता है कि अमेरिका के बाहर इस्तेमाल किए जाने वाले ऐप्लिकेशन, आपके सेट किए गए क्षेत्र के हिसाब से काम करें. जिन भाषाओं और देशों/इलाकों में यह सुविधा उपलब्ध है उनकी पूरी सूची देखने के लिए, Google Maps Platform की कवरेज की जानकारी देखें. साथ ही, region
पैरामीटर के इस्तेमाल के बारे में ज़्यादा जानें.
इसके बाद, आपको पेज पर मैप दिखाने के लिए, एचटीएमएल div की ज़रूरत होगी.
यह वह जगह है जहां मैप दिखेगा.
<div id="map"></div>अगला चरण, अपने मैप की बुनियादी सुविधाएं सेट करना है. यह काम, स्क्रिप्ट यूआरएल में दिए गए initMap स्क्रिप्ट फ़ंक्शन में किया जाता है. इस स्क्रिप्ट में, यहां दिए गए उदाहरण में दिखाया गया है, शुरुआती जगह, मैप आईडी (ऐडवांस मार्कर और क्लाउड पर मैप की स्टाइलिंग के लिए ज़रूरी है), मैप का टाइप, और आपके उपयोगकर्ताओं के लिए मैप पर कौनसे कंट्रोल उपलब्ध हैं, सेट किए जा सकते हैं. ध्यान दें कि getElementById(), "map" div आईडी का रेफ़रंस देता है.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
लोकेटर के लिए, आम तौर पर आपको शुरुआती जगह, केंद्र बिंदु या सीमाएं, और ज़ूम करने का लेवल सेट करने में दिलचस्पी होती है. ज़ूम करने के लेवल से पता चलता है कि मैप को उस जगह पर कितना ज़ूम किया गया है. ज़्यादातर अन्य एलिमेंट, जैसे कि कंट्रोल की ट्यूनिंग, ज़रूरी नहीं है. ऐसा इसलिए, क्योंकि आपको यह तय करना होता है कि मैप के साथ किस लेवल पर इंटरैक्ट करना है.
अपना मानचित्र कस्टमाइज़ करें
अपने मैप के दिखने के तरीके और उसमें मौजूद जानकारी में कई तरह से बदलाव किया जा सकता है. उदाहरण के लिए, ये काम किए जा सकते हैं:
- डिफ़ॉल्ट मैप पिन की जगह, अपनी पसंद के कस्टम मार्कर बनाएं.
- मैप की सुविधाओं के रंग बदलकर, अपने ब्रैंड की पहचान दिखाएं.
- यह कंट्रोल करें कि आपको दिलचस्पी की कौनसी जगहें (आकर्षण, खाना, ठहरने की जगह वगैरह) दिखानी हैं और कितनी बार दिखानी हैं. इससे, उपयोगकर्ताओं का ध्यान अपनी जगहों पर फ़ोकस किया जा सकता है. साथ ही, उन लैंडमार्क को हाइलाइट किया जा सकता है जो उपयोगकर्ताओं को आस-पास की जगह पर पहुंचने में मदद करते हैं.
ज़रूरत के मुताबिक तैयार मैप मार्कर बनाना
डिफ़ॉल्ट पिन के बैकग्राउंड, बॉर्डर या ग्लिफ़ के रंग को बदलकर, ऐडवांस मार्कर को पसंद के मुताबिक बनाया जा सकता है. उदाहरण के लिए, यह दिखाने के लिए कि कोई जगह फ़िलहाल खुली है या नहीं. इसके अलावा, मार्कर को अपने ब्रैंड के लोगो जैसी कस्टम ग्राफ़िक इमेज से बदला जा सकता है या कस्टम एचटीएमएल और सीएसएस मार्कर बनाए जा सकते हैं. सूचना विंडो या पॉप-अप विंडो, उपयोगकर्ताओं को अतिरिक्त जानकारी दे सकती हैं. जैसे, कारोबार के खुले होने का समय, फ़ोन नंबर या फ़ोटो.
यहां कस्टम ग्राफ़िक मार्कर का इस्तेमाल करने वाला एक सैंपल मैप दिया गया है. ( Maps JavaScript API के कस्टम ग्राफ़िक मार्कर विषय में सोर्स कोड देखें.)
ज़्यादा जानकारी के लिए, JavaScript (वेब), Android, और iOS के लिए, ऐडवांस मार्कर से जुड़ा दस्तावेज़ देखें.
अपने मैप को शैली ,में ढ़ालें
Google Maps Platform की मदद से, मैप को इस तरह से स्टाइल किया जा सकता है कि लोग आस-पास की जगहों को आसानी से ढूंढ सकें और वहां जल्दी पहुंच सकें. साथ ही, इससे आपको अपने ब्रैंड को मज़बूत बनाने में मदद मिलती है. उदाहरण के लिए, मैप के रंगों को अपनी ब्रैंडिंग के हिसाब से बदला जा सकता है. साथ ही, उपयोगकर्ताओं को दिखने वाली दिलचस्पी की जगहों को कंट्रोल करके, मैप पर ध्यान भटकाने वाली चीज़ों को कम किया जा सकता है. Google Maps Platform, मैप के लिए कई स्टार्टर टेंप्लेट भी उपलब्ध कराता है. इनमें से कुछ टेंप्लेट को अलग-अलग इंडस्ट्री के लिए ऑप्टिमाइज़ किया गया है. जैसे, यात्रा, लॉजिस्टिक्स, रियल एस्टेट, और खुदरा.
Google Cloud Console में, मैप स्टाइल पेज पर जाकर, मैप की स्टाइल बनाई या उनमें बदलाव किया जा सकता है. यह पेज आपके प्रोजेक्ट में होता है.
Cloud Console में मैप की स्टाइल बनाने और स्टाइल करने के ऐनिमेशन देखने के लिए, इसे बड़ा करें:
इंडस्ट्री के हिसाब से मैप की स्टाइल
इस ऐनिमेशन में, इंडस्ट्री के हिसाब से पहले से तय की गई मैप स्टाइल दिखाई गई हैं. इनका इस्तेमाल किया जा सकता है. ये स्टाइल, हर तरह की इंडस्ट्री के लिए सबसे सही शुरुआती पॉइंट उपलब्ध कराती हैं. उदाहरण के लिए, रीटेल मैप स्टाइल में मैप पर लोकप्रिय जगहों की संख्या कम होती है. इससे लोग आपकी जगहों के साथ-साथ लैंडमार्क पर भी ध्यान दे पाते हैं. इससे उन्हें सबसे नज़दीकी जगह पर तेज़ी से और आसानी से पहुंचने में मदद मिलती है.
लोकप्रिय जगहों को कंट्रोल करने की सुविधा
इस ऐनिमेशन में, लोकप्रिय जगहों के लिए मार्कर का रंग सेट किया गया है. साथ ही, मैप स्टाइल में पीओआई की डेंसिटी बढ़ाई गई है. डेंसिटी जितनी ज़्यादा होगी, मैप पर उतने ही ज़्यादा पीओएस मार्कर दिखेंगे.
हर मैप स्टाइल का अपना आईडी होता है. Cloud Console में स्टाइल पब्लिश करने के बाद, अपने कोड में उस मैप आईडी का रेफ़रंस दें. इसका मतलब है कि अपने ऐप्लिकेशन को फिर से बनाए बिना, मैप की स्टाइल को रीयल टाइम में अपडेट किया जा सकता है. नया लुक, मौजूदा ऐप्लिकेशन में अपने-आप दिखेगा और सभी प्लैटफ़ॉर्म पर इस्तेमाल किया जाएगा. यहां दिए गए उदाहरणों में, Maps JavaScript API का इस्तेमाल करके, वेब पेज में मैप आईडी जोड़ने का तरीका बताया गया है.
स्क्रिप्ट यूआरएल में एक या उससे ज़्यादा map_ids शामिल करने पर, Maps JavaScript API उन स्टाइल को अपने-आप उपलब्ध कराता है. इससे, कोड में उन स्टाइल को कॉल करने पर, मैप को तेज़ी से रेंडर किया जा सकता है.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>यहां दिए गए कोड से, वेब पेज पर स्टाइल किया गया मैप दिखता है. (एचटीएमएल <div id="map"></div> एलिमेंट नहीं दिखाया गया है. इस एलिमेंट में मैप, पेज पर दिखेगा.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
JavaScript (वेब), Android, और iOS में क्लाउड-आधारित मैप स्टाइलिंग को शामिल करने के बारे में ज़्यादा जानें.
कस्टम जगह की जानकारी के डेटा को Place Details के साथ जोड़ना
पिछले सेक्शन इंटरैक्टिव मैप पर अपनी जगहें दिखाएं में, Place Details का इस्तेमाल करके लोगों को अपनी जगहों के बारे में ज़्यादा जानकारी देने के बारे में बताया गया है. जैसे, कारोबार के खुले होने का समय, फ़ोटो, और समीक्षाएं.
Places API (नया) में, अलग-अलग डेटा फ़ील्ड की कीमत और एसकेयू टियर के बारे में जानना ज़रूरी है. लागत मैनेज करने के लिए, एक रणनीति यह है कि अपनी जगहों के बारे में पहले से मौजूद जानकारी को Google Maps से मिली नई जानकारी के साथ जोड़ें. जैसे, कारोबार के कुछ समय के लिए बंद होने, छुट्टी के दिन कारोबार के खुले होने का समय, और उपयोगकर्ताओं की रेटिंग, फ़ोटो, और समीक्षाएं. अगर आपके पास पहले से ही अपने स्टोर की संपर्क जानकारी है, तो आपको Place Details API से उन फ़ील्ड के लिए अनुरोध करने की ज़रूरत नहीं होगी. साथ ही, अपने फ़ील्ड मास्क को सिर्फ़ उन फ़ील्ड को फ़ेच करने के लिए सीमित किया जा सकता है जिन्हें आपको दिखाना है.
आपके पास Place Details के बजाय या उसके साथ इस्तेमाल करने के लिए, जगह के डेटा का अपना डेटा हो सकता है. फ़ुल-स्टैक लोकेटर के लिए कोड लैब में, डेटाबेस के साथ GeoJSON का इस्तेमाल करने का उदाहरण दिया गया है. इससे अपनी जगह की जानकारी को सेव और वापस पाया जा सकता है.