प्रॉडक्ट लोकेटर - लागू करने की गाइड

खास जानकारी

वेब iOS एपीआई

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 से जोड़ना

जगह के आईडी फ़ेच किए जा रहे हैं

इस उदाहरण में इनका इस्तेमाल किया गया है: जगहें एपीआई यह भी उपलब्ध है: 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

अपने डेटाबेस में, स्टोर के बाकी डेटा के साथ इस जगह के आईडी को सेव किया जा सकता है. साथ ही, इसका इस्तेमाल स्टोर के बारे में जानकारी मांगने के एक असरदार तरीके के तौर पर किया जा सकता है. जियोकोड के लिए स्थान आईडी का इस्तेमाल करने, जगह की जानकारी हासिल करने, और जगह के लिए दिशा-निर्देशों का अनुरोध करने के निर्देश नीचे दिए गए हैं.

जगह की जानकारी को जियोकोड करना

इस उदाहरण में इनका इस्तेमाल किया गया है: Geocoding API यह भी उपलब्ध है: JavaScript

अगर स्टोर के आपके डेटाबेस में जगहों के पते हैं, लेकिन भौगोलिक निर्देशांक नहीं, तो उस पते का अक्षांश और देशांतर जानने के लिए Geocoding API का इस्तेमाल करें. इससे आपको पता चलता है कि आपके ग्राहक के सबसे नज़दीक कौन-कौनसे स्टोर हैं. स्टोर को सर्वर साइड पर जियोकोड किया जा सकता है. साथ ही, अपने डेटाबेस में अक्षांश और देशांतर को स्टोर किया जा सकता है और कम से कम हर 30 दिनों में रीफ़्रेश किया जा सकता है.

Google लंदन ऑफ़िस के लिए दिखाए गए जगह के आईडी का अक्षांश और देशांतर पाने के लिए, Geocoding API का इस्तेमाल करने का एक उदाहरण यहां दिया गया है:

    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 की लाइब्रेरी का इस्तेमाल करके किसी भी ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. जब कोई उपयोगकर्ता पता टाइप करता है, तो विजेट का इस्तेमाल करके पता टाइप करने पर ऑटोकंप्लीट की सुविधा मिलती है. सीधे 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;
    });
}

आस-पास की हर जगह के लिए, अपने इन्वेंट्री डेटाबेस के आधार पर प्रॉडक्ट के स्टॉक की स्थिति दिखाई जा सकती है.

स्टोर की जानकारी दिखाई जा रही है

इस उदाहरण में इनका इस्तेमाल किया गया है: Place Library, Maps JavaScript API यह भी उपलब्ध है: Android के लिए Places 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 पर इस्तेमाल करने के लिए, सीधे ऐप्लिकेशन से या सर्वर प्रॉक्सी के ज़रिए दूर से भी इस्तेमाल की जा सकती है

जब आपकी साइट या ऐप्लिकेशन में उपयोगकर्ताओं को रास्ते दिखाए जाते हैं, तो आपके उपयोगकर्ताओं को अलग-अलग जगहों पर जाने और दूसरे पेजों पर जाने या मैप पर प्रतिस्पर्धियों को देखने की ज़रूरत नहीं पड़ती. किसी खास यात्रा के मोड से होने वाले कार्बन उत्सर्जन को दिखाया जा सकता है. साथ ही, आपके पास मौजूद कार्बन डेटा सेट का इस्तेमाल करके, किसी खास यात्रा पर पड़ने वाले असर को दिखाया जा सकता है.

दिशा-निर्देशों से जुड़ी सेवा में ऐसे फ़ंक्शन भी होते हैं जिनकी मदद से आप नतीजों को प्रोसेस कर सकते हैं और उन्हें मैप पर आसानी से दिखा सकते हैं.

नीचे दिशा-निर्देश पैनल को दिखाने का एक उदाहरण दिया गया है. सैंपल के बारे में ज़्यादा जानकारी के लिए, टेक्स्ट पर जाने के निर्देश दिखाना लेख पढ़ें.

मोबाइल पर दिशा निर्देश भेजे जा रहे हैं

उपयोगकर्ताओं के लिए किसी स्थान तक पहुंचना और भी आसान बनाने के लिए, आप उन्हें दिशा-निर्देशों के लिंक को टेक्स्ट या ईमेल कर सकते हैं. जब लोग इस पर क्लिक करेंगे, तो उनके फ़ोन पर 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 में मैप स्टाइल बनाने और स्टाइलिंग के ऐनिमेशन देखने के लिए बड़ा करें:

इंडस्ट्री मैप स्टाइल

इस ऐनिमेशन में, पहले से तय की गई इंडस्ट्री के हिसाब से मैप की स्टाइल दिखाई गई है, जिनका इस्तेमाल किया जा सकता है. ये स्टाइल हर तरह के उद्योग के लिए, शुरुआत का सबसे अच्छा तरीका हैं. उदाहरण के लिए, खुदरा मैप की स्टाइल, मैप पर लोकप्रिय जगहों को कम कर देती है, जिससे उपयोगकर्ता आपकी जगहों पर फ़ोकस कर पाते हैं. साथ ही, लैंडमार्क से उन्हें सबसे नज़दीक की जगह पर जल्द से जल्द और भरोसे के साथ पहुंचने में मदद मिलती है.

मैप की शैली वाले पेज पर माउस, &#39;नई मैप स्टाइल बनाएं&#39; पर क्लिक करता है. नए मैप स्टाइल पेज पर माउस, इंडस्ट्री के लिए ऑप्टिमाइज़ की गई इन स्टाइल के बगल में मौजूद रेडियो बटन पर क्लिक करता है: यात्रा, लॉजिस्टिक, रीयल एस्टेट, और रीटेल. जैसे-जैसे कोई बटन क्लिक किया जाता है वैसे-वैसे मैप की स्टाइल का ब्यौरा और ग्राफ़िक की झलक बदलती रहती है.

लोकप्रिय जगहों को कंट्रोल करने की सुविधा

यह ऐनिमेशन, लोकप्रिय जगहों के लिए मार्कर का रंग सेट करता है और मैप की स्टाइल में POI को बढ़ा देता है. सघनता जितनी ज़्यादा होगी, मैप पर उतनी ही ज़्यादा लोकप्रिय जगह के मार्कर दिखेंगे.

मैप की शैली वाले पेज पर माउस, &#39;नई मैप स्टाइल बनाएं&#39; पर क्लिक करता है. &#39;मैप की नई स्टाइल&#39; पेज पर, &#39;अपना स्टाइल बनाएं&#39; सेक्शन में जाकर, Google मैप का रेडियो बटन चुना गया है. माउस, एटलस स्टाइल के लिए एटलस रेडियो बटन पर क्लिक करता है, फिर &#39;स्टाइल एडिटर&#39; में खोलें पर क्लिक करता है. स्टाइल एडिटर में, माउस लोकप्रिय जगहों की सुविधा पर क्लिक करता है. इसके बाद, आइकॉन एलिमेंट पर क्लिक करके रंग को लाल पर सेट करता है. इसके बाद माउस, लोकप्रिय जगह के डेंसिटी चेकबॉक्स को चुनता है और ज़्यादा से ज़्यादा सघनता के लिए, डेंसिटी कंट्रोल को दाईं ओर स्लाइड करता है. सघनता बढ़ने पर मैप की झलक पर ज़्यादा से ज़्यादा लाल मार्कर दिखते हैं. इसके बाद, माउस &#39;सेव करें&#39; बटन पर चला जाता है.

हर मैप स्टाइल का अपना आईडी होता है. 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 मैप से मिली ताज़ा जानकारी (आम तौर पर बुनियादी और संपर्क डेटा) के साथ मिलाया जाए, जैसे कि अस्थायी बंदी, छुट्टी की अवधि और उपयोगकर्ता रेटिंग, फ़ोटो और समीक्षाएं. अगर आपके पास पहले से ही अपने स्टोर की संपर्क जानकारी है, तो आपको जगह की जानकारी से उन फ़ील्ड का अनुरोध करने की ज़रूरत नहीं होगी. साथ ही, आप जो दिखाना चाहते हैं उसके आधार पर अपने अनुरोध को सिर्फ़ बेसिक या माहौल डेटा फ़ील्ड फ़ेच करने के लिए सीमित कर सकते हैं.

जगह की जानकारी के बजाय, जोड़ी या इस्तेमाल की जा सकने वाली जगह का डेटा हो सकता है. फ़ुल स्टैक लोकेटर के लिए codelab में, जगह की जानकारी को स्टोर और वापस पाने के लिए डेटाबेस के साथ GeoJSON का इस्तेमाल करने का उदाहरण दिया गया है.