खास जानकारी
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 Places की लाइब्रेरी का इस्तेमाल करके, किसी भी ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. जब कोई उपयोगकर्ता कोई पता टाइप करता है, तब विजेट का इस्तेमाल करके ऑटोकंप्लीट की सुविधा के ज़रिए, बाकी जानकारी अपने-आप भर जाती है. आप सीधे 'जगहें' लाइब्रेरी का इस्तेमाल करके अपना खुद का ऑटोकंप्लीट फ़ंक्शन भी मुहैया करा सकते हैं.
नीचे दिए गए उदाहरण में, 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 API | यह भी उपलब्ध है: जगहें Android के लिए SDK टूल | iOS के लिए Places 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 पर इस्तेमाल करने के लिए, दिशा-निर्देश API वेब सेवा, सीधे ऐप्लिकेशन से या सर्वर प्रॉक्सी के ज़रिए, रिमोट तरीके से इस्तेमाल की जा सकती है |
जब उपयोगकर्ताओं को अपनी साइट या ऐप्लिकेशन में से ही निर्देश दिखाए जाते हैं, तो उन्हें आपकी साइट से दूसरी साइट पर जाने और दूसरे पेजों पर उनका ध्यान भटकने या मैप पर प्रतिस्पर्धियों को देखने की ज़रूरत नहीं होती. किसी खास यात्रा मोड से होने वाले कार्बन उत्सर्जन को दिखाया जा सकता है. साथ ही, कार्बन डेटा सेट का इस्तेमाल करके यह दिखाया जा सकता है कि किसी खास यात्रा पर कितना असर पड़ रहा है.
दिशा-निर्देश सेवा में ऐसे फ़ंक्शन भी होते हैं जो आपको परिणामों को संसाधित करने और उन्हें मैप पर आसानी से दिखाने देते हैं.
निर्देश पैनल दिखाने का एक उदाहरण नीचे दिया गया है. नमूने के बारे में ज़्यादा जानकारी के लिए, टेक्स्ट के लिए निर्देश दिखाना देखें.
मोबाइल पर रास्ते की जानकारी भेजी जा रही है
उपयोगकर्ताओं के लिए किसी जगह पर पहुंचना और भी आसान बनाने के लिए, उन्हें मैसेज या ईमेल से निर्देश का लिंक भेजा जा सकता है. जब वे इस ऐप्लिकेशन पर क्लिक करेंगे, तो उनके फ़ोन पर अगर 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 का इस्तेमाल करने का उदाहरण दिया गया है. इसकी मदद से, आपकी जगह की जानकारी को स्टोर और वापस लाया जा सकता है.