खास जानकारी
Google Maps Platform वेब (JS, TS), Android, और iOS के लिए उपलब्ध है. साथ ही, यह जगहों, रास्तों, और दूरी के बारे में जानकारी पाने के लिए वेब सर्विस एपीआई की सुविधा भी देता है. इस गाइड में दिए गए नमूने एक प्लैटफ़ॉर्म के लिए लिखे गए हैं. हालांकि, दस्तावेज़ों के लिंक दिए गए हैं, ताकि उन्हें दूसरे प्लैटफ़ॉर्म पर लागू किया जा सके.
जब उपयोगकर्ता आपके प्रॉडक्ट को ऑनलाइन देखते हैं, तो वे अपना ऑर्डर पाने का सबसे अच्छा और आसान तरीका ढूंढना चाहते हैं. हमारा सुझाव है कि इस विषय में प्रॉडक्ट लोकेटर को लागू करने की गाइड और प्रॉडक्ट को मनमुताबिक बनाने से जुड़ी सलाह, Google Maps Platform API के बेहतर कॉम्बिनेशन के तौर पर, बेहतरीन प्रॉडक्ट लोकेटर उपयोगकर्ता अनुभव देने में मदद करें.
इस गाइड का पालन करके, ग्राहकों को आपके प्रॉडक्ट ढूंढने के लिए ज़रूरी जानकारी दिखाई जा सकती है. साथ ही, उन्हें उस स्टोर का रास्ता बताया जा सकता है जहां उनके सामान मौजूद हैं. जैसे, गाड़ी चला रहे हैं, साइकल चला रहे हैं, पैदल चल रहे हैं या सार्वजनिक परिवहन से यात्रा कर रहे हैं.
एपीआई चालू करना
प्रॉडक्ट लोकेटर लागू करने के लिए, आपको Google Cloud Console में इन एपीआई को चालू करना होगा. ये हाइपरलिंक आपको Google Cloud Console पर भेजते हैं, ताकि चुने गए प्रोजेक्ट के लिए हर एपीआई को चालू किया जा सके:
सेटअप के बारे में ज़्यादा जानकारी पाने के लिए, Google Maps Platform का इस्तेमाल शुरू करना देखें.
लागू करने की गाइड के सेक्शन
इस विषय में हम नीचे दिए गए तरीकों को लागू करने और पसंद के मुताबिक बनाने के बारे में कवर करेंगे.
- सही के निशान वाला आइकॉन, नीति को लागू करने का मुख्य चरण है.
- विकल्प को बेहतर बनाने के लिए, स्टार आइकॉन का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, इसे पसंद के मुताबिक बनाने का सुझाव दिया जाता है.
| स्टोर की जगहों को Google Maps Platform की जगहों से जोड़ना | Google Maps Platform में मौजूद किसी जगह के साथ स्टोर की जगह का मिलान करें. | |
| उपयोगकर्ता की जगह की पहचान करना | सभी प्लैटफ़ॉर्म पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इस्तेमाल के हिसाब से टाइप करने की सुविधा जोड़ें. साथ ही, कम से कम कीस्ट्रोक इस्तेमाल करके, पता सटीक बनाएं. | |
| सबसे नज़दीकी स्टोर की पहचान करना | अलग-अलग जगहों और मंज़िलों के लिए, यात्रा में लगने वाला समय और दूरी कैलकुलेट करें. इसके लिए, परिवहन के अलग-अलग तरीकों की जानकारी दें, जैसे कि पैदल चलना, गाड़ी चलाना, सार्वजनिक परिवहन से यात्रा करना या साइकल चलाना. | |
| स्टोर की जानकारी दिखाई जा रही है | अपने स्टोर पर बेहतर डेटा वाली जानकारी दिखाएं, ताकि उपयोगकर्ता उन तक आसानी से जा सकें. | |
| नेविगेशन के लिए निर्देश देना | पैदल चलने, गाड़ी चलाने, साइकल चलाने, और सार्वजनिक परिवहन जैसे परिवहन के अलग-अलग तरीकों का इस्तेमाल करके, एक जगह से दूसरी जगह तक जाने के लिए रास्तों का डेटा पाएं. | |
| मोबाइल पर रास्ते की जानकारी भेजना | अपने वेबपेज पर निर्देश दिखाने के अलावा, आप उपयोगकर्ता के फ़ोन पर रास्ते में भी Google Maps का इस्तेमाल करके नेविगेशन के लिए निर्देश भी भेज सकते हैं. | |
| इंटरैक्टिव मैप पर अपनी जगहें दिखाना | अपनी जगहों को अलग दिखाने के लिए पसंद के मुताबिक मैप मार्कर बनाएं और अपने ब्रैंड के रंगों से मैच करने के लिए मैप को स्टाइल करें. अपने मैप पर लोकप्रिय जगह दिखाएं या छिपाएं, ताकि लोगों को खुद को सही दिशा में दिखाने में मदद मिल सके. साथ ही, मैप को व्यवस्थित करने के लिए लोकप्रिय जगह की डेंसिटी को कंट्रोल किया जा सकता है. | |
| जगह की जानकारी के साथ जगह की जानकारी का कस्टम डेटा जोड़ना | जगह के बारे में जानकारी के साथ अपनी पसंद के मुताबिक जगह की जानकारी जोड़ें, ताकि उपयोगकर्ताओं को फ़ैसला लेने के लिए बेहतर डेटा मिल सके. |
स्टोर की जगहों को Google Maps Platform की जगहों से जोड़ना
जगह के आईडी लोड किए जा रहे हैं
| इस उदाहरण में, Places API का इस्तेमाल किया गया है | यह भी उपलब्ध है: JavaScript |
आपके पास अपने स्टोर के डेटाबेस में बुनियादी जानकारी हो सकती है, जैसे कि जगह का नाम, उसका पता, और फ़ोन नंबर. साथ ही, आपको इसे Google Maps Platform पर किसी ऐसी जगह से जोड़ना होगा जहां आपके उपयोगकर्ता प्रॉडक्ट पिक अप कर सकें. Google Maps Platform पर उस जगह की जानकारी पाने के लिए, भौगोलिक निर्देशांक और उपयोगकर्ता के योगदान से जुड़ी जानकारी पाएं. इसके लिए, अपने डेटाबेस में हर स्टोर से जुड़ी जगह का आईडी ढूंढें.
आप Places API 'जगह की खोज' में
'जगह का एंडपॉइंट ढूंढें' पर कॉल कर सकते हैं और सिर्फ़ place_id फ़ील्ड का अनुरोध कर सकते हैं.
Google लंदन ऑफ़िस के लिए, जगह के आईडी के अनुरोध का एक उदाहरण नीचे दिया गया है:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
आपके पास अपने डेटाबेस में, स्टोर के बाकी डेटा के साथ इस जगह के आईडी को स्टोर करने का विकल्प है. साथ ही, इसका इस्तेमाल स्टोर के बारे में जानकारी मांगने के बेहतर तरीके के तौर पर किया जा सकता है. जगह के आईडी को जियोकोड करने, जगह की जानकारी फिर से पाने, और जगह के दिशा-निर्देशों का अनुरोध करने के लिए, जगह के आईडी का इस्तेमाल करने के निर्देश नीचे दिए गए हैं.
जगह की जानकारी की जियोकोडिंग
| इस उदाहरण में इसका इस्तेमाल किया गया है: जियोकोडिंग एपीआई | यह भी उपलब्ध है: JavaScript |
अगर आपके स्टोर के डेटाबेस में मोहल्ले के पते हैं, लेकिन भौगोलिक निर्देशांक नहीं हैं, तो उस पते के अक्षांश और देशांतर पता करने के लिए, जियोकोडिंग एपीआई का इस्तेमाल करें. इससे यह पता लगाया जा सकता है कि आपके ग्राहक के आस-पास कौनसे स्टोर हैं. स्टोर को सर्वर साइड पर जियोकोड किया जा सकता है, अपने डेटाबेस में अक्षांश और देशांतर सेव किए जा सकते हैं और कम से कम हर 30 दिन में रीफ़्रेश किए जा सकते हैं.
यहां Google लंदन ऑफ़िस को लौटाए गए, जगह के आईडी का अक्षांश और देशांतर पता करने के लिए जियोकोडिंग एपीआई का इस्तेमाल करने का उदाहरण दिया गया है:
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 जगहें' लाइब्रेरी का इस्तेमाल करके किसी भी ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. जब कोई उपयोगकर्ता कोई पता टाइप करता है, तो विजेट का इस्तेमाल करके ऑटोकंप्लीट की गई जानकारी भर जाती है. आप सीधे 'जगहें' लाइब्रेरी का इस्तेमाल करके अपनी ऑटोकंप्लीट सुविधा भी दे सकते हैं.
यहां दिए गए उदाहरण में, Maps JavaScript API स्क्रिप्ट यूआरएल में libraries=places पैरामीटर जोड़कर, अपनी साइट में 'अपने-आप पूरा होने की जगह' लाइब्रेरी को जोड़ें.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>इसके बाद, उपयोगकर्ता इनपुट के लिए अपने पेज पर एक टेक्स्ट बॉक्स जोड़ें:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input>आखिर में, आपको ऑटोकंप्लीट सेवा शुरू करनी होगी और उसे नाम वाले टेक्स्ट बॉक्स से लिंक करना होगा. जगह के हिसाब से ऑटोकंप्लीट की सुविधा के लिए जियोकोड के टाइप पर पाबंदी लगाने से, आपका इनपुट फ़ील्ड कॉन्फ़िगर हो जाता है, ताकि मोहल्ले के पते, आस-पास की जगहें, शहर, और पिन कोड स्वीकार किए जा सकें. इससे, उपयोगकर्ता अपने मूल की जानकारी देने के लिए किसी भी तरह की खास जानकारी दे सकते हैं. geometry फ़ील्ड का अनुरोध करना न भूलें, ताकि रिस्पॉन्स में उपयोगकर्ता की शुरुआत की जगह के अक्षांश और देशांतर शामिल हों. अपनी जगह और मूल जगह के बीच संबंध दिखाने के लिए, आप इन मैप निर्देशांक का इस्तेमाल करेंगे.
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
componentRestrictions: {'country': ['gb']},
fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}
इस उदाहरण में, उपयोगकर्ता के पता चुनने के बाद, searchFromOrigin() फ़ंक्शन शुरू हो जाता है. इसके बाद, मेल खाने वाले नतीजों की ज्यामिति का इस्तेमाल किया जाता है, जिसमें उपयोगकर्ता की जगह की जानकारी शामिल होती है. इसके बाद, ऑरिजिन के तौर पर उन निर्देशांकों के आधार पर सबसे नज़दीकी जगहों को खोजा जाता है. इस जानकारी के बारे में सबसे नज़दीकी स्टोर की पहचान करना सेक्शन में बताया गया है.
अपने ऐप्लिकेशन में 'जगह की जानकारी अपने-आप पूरा होने की सुविधा' जोड़ने के बारे में कदम-दर-कदम निर्देश देने वाले वीडियो देखने के लिए इसे बड़ा करें:
वेबसाइट
Android ऐप्लिकेशन
iOS ऐप्लिकेशन
ब्राउज़र के जियोलोकेशन का इस्तेमाल करना
HTML5 ब्राउज़र के जियोलोकेशन का अनुरोध करने और उसे मैनेज करने के लिए, मेरी जगह की जानकारी का इस्तेमाल करें विंडो को चालू करने का तरीका जानें:
सबसे नज़दीकी स्टोर की पहचान करना
| इस उदाहरण में इनका इस्तेमाल किया गया है: डिस्टेंस मैट्रिक्स सेवा, Maps JavaScript API | यह भी उपलब्ध है: डिस्टेंस मैट्रिक्स एपीआई |
उपयोगकर्ता की जगह की जानकारी मिलने के बाद, इसकी तुलना अपने स्टोर की जगहों की जानकारी से की जा सकती है. डिस्टेंस मैट्रिक्स सेवा के साथ ऐसा करने से, Maps JavaScript API आपके उपयोगकर्ताओं को अपनी पसंद की जगह चुनने में मदद करता है. इसके लिए, वे ड्राइविंग में लगने वाले समय या सड़क की दूरी तय करते हैं.
जगहों की सूची को व्यवस्थित करने का सामान्य तरीका उन्हें दूरी के हिसाब से क्रम में लगाना है. अक्सर इस दूरी का कैलकुलेशन, सीधे उपयोगकर्ता से किसी जगह तक सीधी लाइन का इस्तेमाल करके किया जाता है. हालांकि, यह जानकारी गुमराह कर सकती है. सीधी लाइन किसी ऐसी नदी के ऊपर या व्यस्त सड़कों पर हो सकती है जहां दूसरी जगहें नहीं जा सकतीं. यह तब अहम होता है, जब आपके पास एक-दूसरे से कुछ किलोमीटर के दायरे में कई जगहें हों.
डिस्टेंस मैट्रिक्स सेवा, Maps JavaScript API शुरुआत की जगह और मंज़िल की जगहों की सूची लेकर काम करता है. यह सिर्फ़ यात्रा की दूरी ही नहीं, बल्कि उनके बीच के समय की भी जानकारी देता है. उपयोगकर्ता के मामले में, शुरुआत की जगह वही होगी जहां वे अभी हैं या वे शुरुआत की जगह ऐसे ही होंगे. साथ ही, मंज़िल उन जगहों की ही होंगी. ऑरिजिन और डेस्टिनेशन को कोऑर्डिनेट पेयर या पते के तौर पर बताया जा सकता है. इस सेवा को कॉल करते समय, सेवा पते से मैच करती है. मौजूदा या आने वाले समय के ड्राइविंग समय के आधार पर नतीजे दिखाने के लिए, अतिरिक्त पैरामीटर के साथ डिस्टेंस मैट्रिक्स सेवा, Maps JavaScript API का इस्तेमाल किया जा सकता है.
नीचे दिए गए उदाहरण में, डिस्टेंस मैट्रिक्स सर्विस, Maps JavaScript API को कॉल किया गया है. इसमें एक बार में उपयोगकर्ता के शुरुआत की जगह और स्टोर की 25 जगहों की जानकारी दी गई है.
function getDistances(place) {
let distanceMatrixService = new google.maps.DistanceMatrixService();
const origins = [place];
return new Promise((resolve, reject) => {
const callback = (response, status) => {
if (status === google.maps.DistanceMatrixStatus.OK && response) {
resolve(response);
} else {
reject(status);
}
};
distanceMatrixService.getDistanceMatrix(
{
origins,
destinations: stores.slice(0, 25).map((store) => store.location),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
},
callback
);
});
}
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((response) => {
for (let i = 0; i < response.rows[0].elements.length; i++) {
stores[i].address = response.destinationAddresses[i];
stores[i].travelDistance = response.rows[0].elements[i].distance.value;
stores[i].travelDistanceText =
response.rows[0].elements[i].distance.text;
stores[i].travelDuration = response.rows[0].elements[i].duration.value;
stores[i].travelDurationText =
response.rows[0].elements[i].duration.text;
}
})
.finally(() => {
renderCards(stores);
autocompleteInput.disabled = false;
isUpdateInProgress = false;
});
}
आस-पास की हर जगह के लिए, अपने इन्वेंट्री डेटाबेस के आधार पर प्रॉडक्ट की स्टॉक स्थिति दिखाई जा सकती है.
स्टोर की जानकारी दिखाई जा रही है
| इस उदाहरण में इनका इस्तेमाल किया गया है: जगहें लाइब्रेरी, Maps JavaScript एपीआई | यह भी उपलब्ध है: Android के लिए जगहें SDK टूल | iOS के लिए स्थान SDK टूल | Places API |
ग्राहकों को अपनी पसंदीदा जगह चुनने या अपना ऑर्डर तय करने में मदद करने के लिए, जगह से जुड़ी ज़रूरी जानकारी शेयर की जा सकती है. जैसे, संपर्क जानकारी, कारोबार के खुले होने का समय, और कारोबार के खुले होने का मौजूदा स्टेटस.
जगह की जानकारी पाने के लिए Maps JavaScript API को कॉल करने के बाद, जवाब को फ़िल्टर और रेंडर किया जा सकता है.
जगह की जानकारी का अनुरोध करने के लिए, आपको अपने हर जगह के लिए, जगह के आईडी की ज़रूरत होगी. अपनी जगह का आईडी वापस पाने के लिए जगह के आईडी पाना देखें.
जगह की जानकारी के लिए दिए गए नीचे दिए गए अनुरोध से, Google लंदन में जगह के आईडी के लिए पता, निर्देशांक, वेबसाइट, फ़ोन नंबर, रेटिंग, और समय दिखता है:
var request = {
placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
प्रॉडक्ट लोकेटर बेहतर बनाना
अपने कारोबार या उपयोगकर्ताओं की ज़रूरतों के आधार पर, उपयोगकर्ताओं के अनुभव को बेहतर बनाया जा सकता है.
नेविगेशन के निर्देश दिए जा रहे हैं
| इस उदाहरण में इनका इस्तेमाल किया गया है: Maps JavaScript API निर्देश सेवा | यह भी उपलब्ध है: दिशा-निर्देश एपीआई Android और iOS पर इस्तेमाल करने के लिए, सीधे ऐप्लिकेशन से या सर्वर प्रॉक्सी के ज़रिए, वेब सेवा का इस्तेमाल करें |
जब उपयोगकर्ताओं को अपनी साइट या ऐप्लिकेशन में से ही रास्ते की जानकारी दी जाती है, तो आपके उपयोगकर्ताओं को आपकी साइट से किसी दूसरी साइट पर जाने की ज़रूरत नहीं होती. साथ ही, उन्हें दूसरे पेजों पर जाने या मैप पर प्रतिस्पर्धियों को देखने की ज़रूरत नहीं होती. किसी खास यात्रा मोड से होने वाले कार्बन उत्सर्जन को दिखाया जा सकता है. साथ ही, कार्बन डेटा सेट का इस्तेमाल करके किसी खास यात्रा से होने वाले असर को दिखाया जा सकता है.
दिशा-निर्देश सेवा में ऐसे फ़ंक्शन भी होते हैं जो आपको परिणामों को प्रोसेस करने और उन्हें मैप पर आसानी से दिखाने देते हैं.
निर्देश पैनल दिखाने का एक उदाहरण नीचे दिया गया है. सैंपल के बारे में ज़्यादा जानकारी के लिए, टेक्स्ट के निर्देश दिखाना लेख पढ़ें.
मोबाइल पर दिशा निर्देश भेजे जा रहे हैं
उपयोगकर्ताओं के लिए किसी स्थान तक पहुंचना और भी आसान बनाने के लिए, आप उन्हें दिशा-निर्देश लिंक मैसेज कर सकते हैं या ईमेल कर सकते हैं. अगर वे इस पर क्लिक करते हैं, तो उनके फ़ोन पर 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 शामिल करना होगा. इसके लिए, अपने एचटीएमएल पेज में इस स्क्रिप्ट को लिंक करें.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>यह यूआरएल, JavaScript initMap फ़ंक्शन का रेफ़रंस देता है, जो पेज लोड होने पर चलता है. यूआरएल में, अपने मैप की भाषा या क्षेत्र भी तय किया जा सकता है, ताकि यह पक्का किया जा सके कि उसे टारगेट किए जा रहे देश के हिसाब से सही तरीके से फ़ॉर्मैट किया गया है. क्षेत्र सेट करने से यह भी पक्का होता है कि
अमेरिका से बाहर इस्तेमाल किए जाने वाले ऐप्लिकेशन का व्यवहार, आपके सेट किए गए
क्षेत्र के मुताबिक नहीं है. इस्तेमाल की जा सकने वाली भाषाओं और इलाकों की पूरी सूची देखने के लिए, Google Maps Platform की कवरेज की जानकारी देखें. साथ ही, region पैरामीटर के इस्तेमाल के बारे में ज़्यादा जानें.
इसके बाद, पेज पर अपना मैप रखने के लिए आपको एक एचटीएमएल div की ज़रूरत होगी.
इस जगह पर मैप दिखाया जाएगा.
<div id="map"></div>अगला चरण है, अपने मैप की बुनियादी सुविधाएं सेट करना. स्क्रिप्ट यूआरएल में दिए गए initMap स्क्रिप्ट फ़ंक्शन में ऐसा किया जाता है. नीचे दिए गए उदाहरण में दिखाई गई इस स्क्रिप्ट में, शुरुआती जगह, मैप का टाइप, और आपके उपयोगकर्ताओं के लिए मैप पर उपलब्ध होने वाले कंट्रोल सेट किए जा सकते हैं. ध्यान दें कि
getElementById() ऊपर दिए गए "मैप" div आईडी का रेफ़रंस देता है.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
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 में क्लाउड-आधारित मैप स्टाइल इस्तेमाल करने के बारे में ज़्यादा जानें.
जगह की जानकारी के साथ, जगह की जानकारी का कस्टम डेटा जोड़ना
पिछले इंटरैक्टिव मैप पर अपनी जगहों की जानकारी दिखाना सेक्शन में, हमने जगह की जानकारी का इस्तेमाल करके इनके बारे में जानकारी दी थी. इसका मकसद, उपयोगकर्ताओं को आपके कारोबार की जगह के बारे में बेहतर जानकारी देना था, जैसे कि कारोबार के खुले होने का समय, फ़ोटो, और समीक्षाएं.
जगह की जानकारी के अलग-अलग डेटा फ़ील्ड की लागत को समझना मददगार होता है. इन्हें बेसिक, संपर्क, और माहौल से जुड़े डेटा की कैटगरी में रखा जाता है. लागत मैनेज करने के लिए, एक रणनीति यह है कि आपके पास पहले से मौजूद जानकारी को Google Maps से नई जानकारी (आम तौर पर बुनियादी और संपर्क डेटा) के साथ जोड़ा जाए, जैसे कि कुछ समय के लिए कारोबार बंद होना, छुट्टी के दिन कारोबार के खुले होने का समय, उपयोगकर्ता रेटिंग, फ़ोटो, और समीक्षाएं. अगर आपके पास अपने स्टोर की संपर्क जानकारी पहले से है, तो आपको जगह की जानकारी से उन फ़ील्ड का अनुरोध करने की ज़रूरत नहीं होगी. साथ ही, आप जो दिखाना चाहते हैं उसके हिसाब से सिर्फ़ बेसिक या माहौल के डेटा फ़ील्ड फ़ेच करने के लिए, अपने अनुरोध को सीमित कर सकते हैं.
आपके पास जगह की जानकारी के बजाय, अपनी जगह का डेटा हो सकता है. फ़ुल-स्टैक लोकेटर के लिए, कोडलैब में डेटाबेस के साथ GeoJSON का इस्तेमाल किया जाता है. इसकी मदद से, आपकी जगह की जानकारी को स्टोर और वापस पाया जा सकता है.