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

खास जानकारी

जब आपके उपयोगकर्ता आपके प्रॉडक्ट ऑनलाइन देखते हैं, तो वे ऑर्डर पाने का सबसे अच्छा और सबसे आसान तरीका ढूंढना चाहते हैं. प्रॉडक्ट लोकेटर को लागू करने के बारे में इस लेख में दी गई गाइड और इसे पसंद के मुताबिक बनाने के सुझावों के आधार पर, हम Google Maps Platform के एपीआई का सबसे सही कॉम्बिनेशन इस्तेमाल करने का सुझाव देते हैं. इससे, उपयोगकर्ताओं को प्रॉडक्ट लोकेटर का बेहतर अनुभव मिलता है.

इस सुविधा को लागू करने के लिए दी गई गाइड का पालन करके, खरीदारों को आपके प्रॉडक्ट ढूंढने के लिए ज़रूरी जानकारी दी जा सकती है. साथ ही, उन्हें उस स्टोर के लिए निर्देश दिए जा सकते हैं जहां उनका सामान है. भले ही, वे कार, साइकल, पैदल या सार्वजनिक परिवहन का इस्तेमाल कर रहे हों.

एपीआई चालू करना

प्रॉडक्ट लोकेटर को लागू करने के लिए, आपको Google Cloud Console में ये एपीआई चालू करने होंगे. यहां दिए गए हाइपरलिंक, आपके चुने गए प्रोजेक्ट के लिए हर एपीआई को चालू करने के लिए, आपको Google Cloud Console पर ले जाते हैं:

• Maps JavaScript API
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

सेटअप के बारे में ज़्यादा जानने के लिए, Google Maps Platform का इस्तेमाल शुरू करना लेख पढ़ें.

लागू करने की गाइड के सेक्शन

इस विषय में, हम लागू करने और पसंद के मुताबिक बनाने के इन तरीकों के बारे में बताएंगे.

• check_circle_filled सही के निशान वाला आइकॉन, लागू करने का मुख्य चरण है.
• stars स्टार आइकॉन को पसंद के मुताबिक बनाया जा सकता है. हालांकि, हमारा सुझाव है कि आप ऐसा करें, ताकि समाधान को बेहतर बनाया जा सके.

check_circle_filled	स्टोर की जगहों की जानकारी को Google Maps Platform की जगहों की जानकारी के साथ जोड़ना	स्टोर की जगह की जानकारी को Google Maps Platform में मौजूद किसी जगह की जानकारी से मैच करना.
check_circle_filled	उपयोगकर्ता की जगह की जानकारी का पता लगाना	सभी प्लैटफ़ॉर्म पर उपयोगकर्ता अनुभव को बेहतर बनाने और कम से कम कीस्ट्रोक के साथ पते को ज़्यादा सटीक बनाने के लिए, टाइप-अस-यू-गो फ़ंक्शन जोड़ें.
check_circle_filled	सबसे नज़दीकी स्टोर की पहचान करना	एक से ज़्यादा जगहों से एक से ज़्यादा जगहों के लिए, यात्रा की दूरी और यात्रा के समय का हिसाब लगाएं. इसके लिए, अलग-अलग तरह के परिवहन के साधनों की जानकारी दें. जैसे, पैदल, ड्राइव करके, सार्वजनिक परिवहन या साइकल से.
check_circle_filled	स्टोर की जानकारी दिखाना	अपने स्टोर पर ज़्यादा डेटा वाली जानकारी दिखाएं, ताकि उपयोगकर्ता उन पर आसानी से नेविगेट कर सकें.
stars	नेविगेशन के निर्देश देना	यात्रा के अलग-अलग तरीकों का इस्तेमाल करके, शुरुआती पॉइंट से मंज़िल तक के निर्देशों का डेटा पाएं. जैसे, पैदल, ड्राइविंग, साइकल चलाना, और सार्वजनिक परिवहन (बस, मेट्रो वगैरह).
stars	मोबाइल पर निर्देश भेजना	अपने वेबपेज पर निर्देश दिखाने के अलावा, Google Maps का इस्तेमाल करके नेविगेशन के लिए, उपयोगकर्ता के फ़ोन पर भी निर्देश भेजे जा सकते हैं.
stars	इंटरैक्टिव मैप पर अपनी जगहें दिखाना	अपनी जगहों को अलग दिखाने के लिए, मैप पर कस्टम मार्कर बनाएं. साथ ही, अपने ब्रैंड के कलर से मैच करने के लिए, मैप को स्टाइल दें. अपने मैप पर लोकप्रिय जगहों (पीओआई) को दिखाएं (या छिपाएं), ताकि उपयोगकर्ता बेहतर तरीके से अपने आस-पास की जगहों के बारे में जान सकें. साथ ही, मैप पर ग़ैर-ज़रूरी चीज़ों को दिखाने से रोकने के लिए, पीओआई की संख्या को कंट्रोल करें.
stars	जगह की जानकारी के साथ, जगह की कस्टम जानकारी का डेटा जोड़ना	अपनी जगह की कस्टम जानकारी को 'जगह की जानकारी' के साथ जोड़ें, ताकि उपयोगकर्ताओं को फ़ैसले लेने के लिए ज़्यादा डेटा मिल सके.

जगह के आईडी पाना

इस उदाहरण में इनका इस्तेमाल किया गया है: Places API

यह सुविधा इनके लिए भी उपलब्ध है: JavaScript

आपके पास अपने स्टोर का डेटाबेस हो सकता है. इसमें उस जगह का नाम, पता, और फ़ोन नंबर जैसी बुनियादी जानकारी हो सकती है. साथ ही, आपको इसे Google Maps Platform में किसी जगह से जोड़ना हो सकता है. ऐसा, उस जगह के सेट के तौर पर करना होगा जहां आपके उपयोगकर्ता प्रॉडक्ट पिक अप कर सकते हैं. Google Maps Platform पर मौजूद उस जगह की जानकारी फ़ेच करने के लिए, अपने डेटाबेस में मौजूद हर स्टोर का जगह आईडी ढूंढें. इसमें भौगोलिक निर्देशांक और उपयोगकर्ता से मिली जानकारी भी शामिल है. Places API की Place Search सुविधा में, जगह ढूंढने वाले एंडपॉइंट को कॉल किया जा सकता है और सिर्फ़ 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 में Places की ऑटोकंप्लीट लाइब्रेरी

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

ब्राउज़र की जगह की जानकारी का इस्तेमाल करना

HTML5 ब्राउज़र की जगह की जानकारी का अनुरोध करने और उसे मैनेज करने के लिए, मेरी जगह की जानकारी का इस्तेमाल करें विंडो को चालू करने का तरीका देखें:

इस उदाहरण में इनका इस्तेमाल किया गया है: दूरी का मैट्रिक्स बताने वाली सेवा, Maps JavaScript API

यह भी उपलब्ध है: Distance Matrix 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;
    });
}

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

इस उदाहरण में इनका इस्तेमाल किया गया है: Places Library, Maps JavaScript API

यह भी उपलब्ध है: Android के लिए Places SDK टूल | iOS के लिए Places SDK टूल | Places API

जगह की ज़्यादा जानकारी शेयर की जा सकती है. जैसे, संपर्क जानकारी, कारोबार के खुले होने का समय, और कारोबार के खुले होने की मौजूदा स्थिति. इससे खरीदारों को अपनी पसंद की जगह चुनने या ऑर्डर करने में मदद मिलती है.

जगह की जानकारी पाने के लिए Maps JavaScript API को कॉल करने के बाद, रिस्पॉन्स को फ़िल्टर और रेंडर किया जा सकता है.

जगह की जानकारी का अनुरोध करने के लिए, आपको अपनी हर जगह का प्लेस आईडी चाहिए होगा. अपनी जगह का प्लेस आईडी पाने के लिए, प्लेस आईडी पाना लेख पढ़ें.

जगह की जानकारी के लिए किया गया यह अनुरोध, Google London के प्लेस आईडी के लिए पता, निर्देशांक, वेबसाइट, फ़ोन नंबर, रेटिंग, और खुले होने का समय दिखाता है:

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 की दिशा बताने वाली सेवा

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