लोकेटर प्लस लागू करने के लिए गाइड

खास जानकारी

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

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

Locator Plus का इस्तेमाल करने वाले लोगों के लिए, Analytics डैशबोर्ड की मदद से डेटा का विश्लेषण किया जा सकता है और अहम जानकारी जनरेट की जा सकती है. इससे आपको यह साफ़ तौर पर पता चलता है कि खरीदार, आपके स्टोर लोकेटर के साथ किस तरह से इंटरैक्ट कर रहे हैं. इस रिपोर्ट को ऐक्सेस करने के लिए, कंसोल के यूज़र ऐक्टिविटी की रिपोर्ट सेक्शन पर जाएं. इस रिपोर्ट के बारे में ज़्यादा जानने के लिए, यूज़र ऐक्टिविटी की रिपोर्ट देखें.

इस डायग्राम में, Locator Plus को लागू करने के लिए इस्तेमाल किए जाने वाले मुख्य एपीआई दिखाए गए हैं. डायग्राम में, जगह की जानकारी के डेटा का डेटाबेस भी दिखाया गया है. इसे Place Details के साथ जोड़ा जा सकता है, ताकि उपयोगकर्ताओं को सबसे अच्छी और पूरी जानकारी दी जा सके. (बड़ा करने के लिए क्लिक करें.)

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

• Maps JavaScript API
• Places API (नया वर्शन)
• Geocoding API
• Routes API

लागू करने के सेक्शन

इस दस्तावेज़ में, हम इन तरीकों और कस्टमाइज़ेशन के बारे में बताएंगे.

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

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

इस सुविधा को दो तरीकों से चालू किया जा सकता है: क्विक बिल्डर Locator Plus सलूशन का इस्तेमाल करके, इसे पहले से मौजूद सुविधा के तौर पर उपलब्ध कराया जा सकता है या डाइनैमिक मैप को लागू करके, इसे चालू किया जा सकता है. इस सेक्शन में, इन विकल्पों के बारे में ज़्यादा जानकारी दी गई है.

Quick Builder Locator Plus का इस्तेमाल करना

अपनी Business Profile से कारोबार की जानकारी इंपोर्ट करने के लिए, क्विक बिल्डर लोकेटर प्लस सलूशन का इस्तेमाल किया जा सकता है. इसलिए, अब आपकी Business Profile में मौजूद कारोबार की जानकारी में किया गया बदलाव, आपकी वेबसाइट पर मौजूद स्टोर लोकेटर में दिखेगा. इन बदलावों में कारोबार के खुले होने का समय, संपर्क जानकारी, फ़ोटो, सेवा के विकल्प वगैरह शामिल हो सकते हैं. क्विक बिल्डर की मदद से, मैप पर कारोबार की जगहों को सेट अप करने की सुविधा को तुरंत एक्सप्लोर किया जा सकता है. साथ ही, डिप्लॉय किया जा सकने वाला कोड जनरेट किया जा सकता है या कुछ ही मिनटों में सीधे Google Cloud Storage में डिप्लॉय किया जा सकता है.

Dynamic Maps को खुद लागू करना

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

सबसे पहले, आपको पेज में Maps JavaScript API को शामिल करना होगा. इसके लिए, अपने एचटीएमएल पेज में यह स्क्रिप्ट लिंक करें. इसमें libraries=marker शामिल करें, ताकि मैप में ऐडवांस मार्कर जोड़े जा सकें.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>

यूआरएल, JavaScript initMap फ़ंक्शन को रेफ़र करता है. यह फ़ंक्शन, पेज लोड होने पर चलता है. यूआरएल में, अपने मैप की भाषा या क्षेत्र भी तय किया जा सकता है. इससे यह पक्का किया जा सकता है कि मैप को उस देश के हिसाब से सही तरीके से फ़ॉर्मैट किया गया है जिसे टारगेट किया जा रहा है. क्षेत्र सेट करने से यह भी पक्का होता है कि अमेरिका से बाहर इस्तेमाल किए जाने वाले ऐप्लिकेशन, आपके सेट किए गए क्षेत्र के हिसाब से काम करें. Google Maps Platform के कवरेज की जानकारी देखें. इसमें उन भाषाओं और इलाकों की पूरी सूची दी गई है जहां यह सुविधा काम करती है. साथ ही, region पैरामीटर के इस्तेमाल के बारे में ज़्यादा जानें.

इसके बाद, आपको पेज पर मैप दिखाने के लिए, तय की गई ऊंचाई वाले एचटीएमएल div की ज़रूरत होगी. यह वह कंटेनर है जहां मैप दिखता है.

<div id="map" style="height: 500px; width: 100%;"></div>

अगला चरण, अपने मैप की बुनियादी सुविधाओं को सेट करना है. यह काम, स्क्रिप्ट यूआरएल में बताए गए initMap स्क्रिप्ट फ़ंक्शन में किया जाता है. इस स्क्रिप्ट में, शुरुआती जगह, मैप आईडी (ऐडवांस मार्कर और क्लाउड पर मैप की स्टाइलिंग की सुविधाओं के लिए ज़रूरी है), मैप का टाइप, और उपयोगकर्ताओं के लिए मैप पर उपलब्ध कंट्रोल सेट किए जा सकते हैं. यहां दिए गए उदाहरण में यह स्क्रिप्ट दिखाई गई है. ध्यान दें कि getElementById(), पिछले उदाहरण में "मैप" div आईडी को रेफ़र करता है.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    mapId: "DEMO_MAP_ID",
    zoomControl: false
  });
}

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

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

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

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

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

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

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

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

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

मैप पर जगहें जोड़ना

अगले चरण में, मैप पर अपनी जगहों की जानकारी जोड़ें. आम तौर पर, ऐसा करने के लिए मैप में ऐडवांस मार्कर जोड़े जाते हैं. हालांकि, आपके पास कई अन्य विकल्प भी होते हैं. जैसे, डेटा लेयर.

अपनी जगह के अक्षांश और देशांतर की जानकारी मिलने के बाद, मैप पर कस्टम टेक्स्ट ग्लिफ़ के साथ ऐडवांस मार्कर जोड़ने का उदाहरण यहां दिया गया है:

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

कुछ मार्कर की मदद से, एक साथ कई जगहों की जानकारी देखी जा सकती है.

अगर जगहों की संख्या ज़्यादा है, तो JavaScript, Android या iOS के लिए, मार्कर क्लस्टरिंग यूटिलिटी का इस्तेमाल किया जा सकता है. यहां JavaScript स्टोर लोकेटर GitHub सैंपल में मार्कर क्लस्टरिंग का एक उदाहरण दिया गया है.

आपके पास जगह की जानकारी शेयर करने का विकल्प होता है. इससे लोगों को आपके कारोबार की किसी जगह पर जाने से पहले, उसके बारे में ज़रूरी जानकारी मिल जाती है. जगह की ज़्यादा जानकारी देने वाली सुविधा की मदद से, लोगों को संपर्क जानकारी, कारोबार के खुले होने का समय, रेटिंग, फ़ोटो, और कुछ समय के लिए बंद होने की स्थिति जैसी जानकारी मिलती है. इससे लोगों को आपकी जगह पर जाने से पहले ही, उसके बारे में सटीक जानकारी मिल जाती है. Places API (नया) को कॉल करने के बाद, जवाब को फ़िल्टर करके जानकारी विंडो, वेब साइडबार या अपनी पसंद के किसी अन्य तरीके से रेंडर किया जा सकता है.

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

Place क्लास का इस्तेमाल करने वाले इस उदाहरण में, Maps JavaScript API की Places लाइब्रेरी का इस्तेमाल करके, जगह की जानकारी हासिल की गई है. साथ ही, उसे InfoWindow में जोड़ा गया है. इस तरीके में, लागत बचाने की रणनीति का इस्तेमाल किया जाता है. इसमें, Place Details का अनुरोध सिर्फ़ तब ट्रिगर होता है, जब उपयोगकर्ता मार्कर पर क्लिक करके जानकारी का अनुरोध करता है. इसमें, उपयोगकर्ता की दिलचस्पी के हिसाब से, सभी जगहों की जानकारी पहले से फ़ेच नहीं की जाती.

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });
  
  

उपयोगकर्ताओं को अपने कारोबार की जगह का एरियल व्यू दिखाने से, उन्हें यह समझने में मदद मिलती है कि वह जगह कैसी दिखती है. इससे उन्हें वह जगह ढूंढने में मदद मिलती है. जब कोई उपयोगकर्ता ज़्यादा जानकारी देखने के लिए किसी एक जगह को चुनता है, तो उस जगह को ज़ूम इन करके, सैटलाइट से ली गई तस्वीरों को 45° के ऐंगल से दिखाया जा सकता है.

यहां दिए गए कोड सैंपल से, मैप को हाई ज़ूम लेवल, साथ काम करने वाले मैप टाइप, और झुकाव के ऐसे ऐंगल पर सेट किया जाता है जिससे 45° वाली इमेजरी दिखती है. हालांकि, इसके लिए ज़रूरी है कि वह इमेजरी उपलब्ध हो. 45° की इमेजरी की उपलब्धता के बारे में जानकारी, दस्तावेज़ में दी गई है.

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

ओरिजनल मैप व्यू पर रीसेट किया जा रहा है

उपयोगकर्ता अक्सर किसी एक जगह की पूरी जानकारी वाले व्यू और आस-पास की कई जगहों की खास जानकारी वाले व्यू के बीच स्विच करना चाहते हैं. इसके लिए, एक लिसनर जोड़ें, ताकि यह पता लगाया जा सके कि उपयोगकर्ता ने मैप इंटरैक्शन या सूची वाले व्यू में, ज़्यादा जानकारी वाले व्यू को कब छोड़ा. उदाहरण के लिए, map ऑब्जेक्ट पर zoom_changed इवेंट को सुनने से पता चलता है कि उपयोगकर्ता ने या तो ज़्यादा जानकारी वाले व्यू से मैन्युअल तरीके से ज़ूम आउट किया है या किसी अन्य फ़ंक्शन को कॉल किया है, जिसने ज़ूम लेवल को अपडेट किया है. इस सैंपल में, ज़ूम आउट करने पर मैप, ओरिजनल मैप टाइप और टिल्ट पर रीसेट हो जाता है.

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

किसी भी लोकेटर का अगला मुख्य कॉम्पोनेंट, उपयोगकर्ता की शुरुआती जगह की जानकारी की पहचान करना है. डिफ़ॉल्ट रूप से, मोबाइल की जगह की जानकारी और वेब ब्राउज़र की जगह/जियोलोकेशन का इस्तेमाल करके, उपयोगकर्ता की मौजूदा जगह को यात्रा शुरू करने की जगह के तौर पर सेट करने के लिए, उपयोगकर्ता की अनुमति मांगी जा सकती है. हालांकि, हो सकता है कि उपयोगकर्ता उन अनुमतियों को अस्वीकार कर दे या किसी दूसरी जगह को अपने शुरुआती पॉइंट के तौर पर सेट करना चाहे.

आज-कल के उपयोगकर्ताओं को Google Maps के उपभोक्ता वर्शन पर, टाइप करने के दौरान अपने-आप पूरा होने वाले सुझाव की सुविधा इस्तेमाल करने की आदत है. इस सुविधा को किसी भी ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. इसके लिए, मोबाइल डिवाइसों और वेब पर Google Maps Platform की जगहों की लाइब्रेरी का इस्तेमाल किया जा सकता है. जब कोई उपयोगकर्ता कोई पता टाइप करता है, तो ऑटोकंप्लीट की सुविधा विजेट का इस्तेमाल करके बाकी जानकारी भर देती है. Place Autocomplete Data API का सीधे तौर पर इस्तेमाल करके, अपने-आप पूरा होने की सुविधा भी उपलब्ध कराई जा सकती है.

अपनी साइट पर, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाली लाइब्रेरी जोड़ने के लिए, आपको Maps JavaScript API स्क्रिप्ट यूआरएल में कुछ क्वेरी पैरामीटर जोड़ने होंगे. यहां दिए गए उदाहरण में, जोड़ा गया हिस्सा libraries=places,marker है.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>

इसके बाद, अपने पेज पर एक कंटेनर एलिमेंट जोड़ें, जहां PlaceAutocompleteElement विजेट को जोड़ा जाएगा.

<div id="autocomplete-container"></div>

आखिर में, PlaceAutocompleteElement विजेट को शुरू करें और उसे कंटेनर में जोड़ें. किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा को includedPrimaryTypes: ["geocode"] के साथ सीमित करने पर, विजेट को मोहल्ले के पते, आस-पास की जगहों, शहरों, और पिन कोड को स्वीकार करने के लिए कॉन्फ़िगर किया जाता है. इससे उपयोगकर्ता, अपनी यात्रा शुरू करने की जगह के बारे में बताने के लिए, किसी भी लेवल की जानकारी डाल सकते हैं. जब कोई उपयोगकर्ता किसी सुझाव को चुनता है, तो gmp-select इवेंट ट्रिगर होता है. इसके बाद, place.fetchFields() को कॉल करके location फ़ील्ड का अनुरोध किया जा सकता है. इस फ़ील्ड में, उपयोगकर्ता की शुरुआती जगह के अक्षांश और देशांतर की जानकारी होती है. मैप को फिर से बीच में लाने और अपनी जगहों और ऑरिजिन के बीच संबंध दिखाने के लिए, आपको मैप के इन निर्देशांकों का इस्तेमाल करना होगा.

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });

इस उदाहरण में, उपयोगकर्ता के पता चुनने के बाद, addUserLocation() फ़ंक्शन को लागू किया जाता है. यह मैच होने वाले नतीजे की जगह की जानकारी लेता है, मैप को उस जगह पर ले जाता है, और एक ऐडवांस मार्कर जोड़ता है.

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

इसके बाद, उपयोगकर्ता और किसी खास जगह के बीच का संबंध देखा जा सकता है. यह संबंध, यहां दी गई इमेज में दिखाया गया है.

उपयोगकर्ता की जगह की जानकारी मिलने के बाद, इसकी तुलना अपने कारोबार की जगहों से की जा सकती है. Routes API में Compute Route Matrix सुविधा (या Maps JavaScript API की Routes लाइब्रेरी में RouteMatrix क्लास) का इस्तेमाल करके ऐसा करने से, आपके उपयोगकर्ताओं को ड्राइविंग में लगने वाले समय या सड़क की दूरी के हिसाब से, सबसे सुविधाजनक जगह चुनने में मदद मिलेगी.

उपयोगकर्ता के आस-पास की जगहों को दिखाने का मतलब है कि आपने पहले से ही अपनी जगहों की जानकारी भरी हुई है. अपने खुद के लोकेशन डेटाबेस का इस्तेमाल करते समय, यह पक्का करना ज़रूरी है कि डेटा ऐसे फ़ॉर्मैट में हो जिसे मैप में इस्तेमाल किया जा सके. जैसे, GeoJSON, जिसके बारे में डेटा लेयर विषय में बताया गया है.

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

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

यहां दिए गए उदाहरण में, Routes API में computeRouteMatrix एंडपॉइंट को कॉल किया गया है. इसमें उपयोगकर्ता की यात्रा शुरू करने की जगह और मंज़िल की जगह के आईडी की जानकारी दी गई है. इस उदाहरण में, मैप के केंद्र से लंदन में मौजूद Google के तीन ऑफ़िस की दूरी और यात्रा में लगने वाले समय का हिसाब लगाया गया है:

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

सेवा से मिलने वाले जवाब में, शुरुआत और मंज़िल के हर जोड़े के लिए दूरी (मीटर में) और समय की जानकारी शामिल होती है. यह जानकारी, यहां दिए गए उदाहरण की तरह दिखती है:

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

इस इमेज में, मैप पर यात्रा शुरू होने की जगह (लाल मार्कर C) और मंज़िलें दिखाई गई हैं:

सीधी लाइन की दूरी और रास्ते की दूरी अक्सर अलग-अलग होती है. जैसा कि इस टेबल में दिखाया गया है.

हालांकि, दूरी के हिसाब से जगह B सबसे नज़दीक है, लेकिन वहां पहुंचने का रास्ता और समय ज़्यादा है, क्योंकि जगह A तक हाईवे से पहुंचा जा सकता है.

यह अनुरोध करने के बाद, मैच को प्रोसेस किया जा सकता है, ताकि जवाबों को ड्राइविंग में लगने वाले समय के हिसाब से क्रम में लगाया जा सके. लोकेटर कोड लैब में, आपको इस तरह के फ़ंक्शन के उदाहरण मिल सकते हैं.

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

Maps JavaScript API की Routes लाइब्रेरी में मौजूद Route क्लास में, createPolylines() और createWaypointAdvancedMarkers() जैसे तरीके भी मौजूद हैं. इनकी मदद से, नतीजों को प्रोसेस किया जा सकता है और उन्हें मैप पर दिखाया जा सकता है.

यहां मैप पर रास्ते का अनुरोध करने और उसे दिखाने का उदाहरण दिया गया है. सैंपल के बारे में ज़्यादा जानकारी के लिए, रास्ता पाएं देखें.

Maps की इन सुविधाओं के बारे में ज़्यादा जानने के लिए, Maps JavaScript API के दस्तावेज़ पढ़ें या लोकेटर बनाने के लिए, सिलसिलेवार तरीके से कोडलैब देखें.

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

इस सुविधा को चालू करने के कई तरीके हैं: (1) क्विक बिल्डर Locator Plus सलूशन का इस्तेमाल करके, इस सुविधा को सीधे तौर पर उपलब्ध कराया जा सकता है. (2) अपनी Business Profile का इस्तेमाल करके. इस सेक्शन में, इन विकल्पों के बारे में ज़्यादा जानकारी दी गई है.

क्विक बिल्डर Locator Plus का इस्तेमाल करना

Business Profile से कारोबार की जानकारी को तुरंत इंपोर्ट करने के लिए, क्विक बिल्डर Locator Plus सलूशन का इस्तेमाल किया जा सकता है. क्विक बिल्डर टूल में इंपोर्ट करने के बाद, अपने कारोबार की जगहों के लिए, एम्बेड किए गए अपॉइंटमेंट बुकिंग लिंक चालू किए जा सकते हैं. इसके लिए, Reserve with Google का इस्तेमाल करें. अगर आपके पास Google खाते से जुड़ी कोई Business Profile नहीं है, तो भी क्विक बिल्डर का इस्तेमाल करके, उन कारोबारों के लिए बुकिंग लिंक एम्बेड किए जा सकते हैं जिनके लिए आपने Reserve with Google* के ज़रिए, बुकिंग की सेवा देने वाली तीसरे पक्ष की कंपनियों के साथ बुकिंग की सुविधा पहले से चालू की हुई है.

*Reserve with Google, कुछ ऐसे देशों/इलाकों में ही उपलब्ध है जहां कारोबार, बुकिंग की सेवा देने वाली कंपनी के साथ काम करते हैं. अगर आपको Reserve with Google में दिलचस्पी है, लेकिन आप Reserve with Google के किसी पार्टनर के साथ काम नहीं कर रहे हैं, तो सेवा देने वाली अपनी कंपनी को दिलचस्पी दिखाने वाला यह फ़ॉर्म भरने के लिए कहें. साथ ही, हमारा दस्तावेज़ देखने के लिए कहें, ताकि उसे पता चल सके कि इस सुविधा का इस्तेमाल कैसे किया जा सकता है. अगर आपने बुकिंग की सेवा देने वाली किसी कंपनी के साथ पहले से काम नहीं किया है, तो Business Profile मैनेज करने के डैशबोर्ड में बुकिंग सेक्शन में जाकर, ज़रूरी शर्तें पूरी करने वाली कंपनियों की जानकारी देखी जा सकती है.

अपॉइंटमेंट बुक करने की सुविधा चालू करने के लिए, Business Profile का इस्तेमाल करना

Business Profile की मदद से, इंटरनेट पर अपनी मौजूदगी मैनेज करने पर, कारोबार की जो जगहें जोड़ी जाती हैं वे Google Maps Platform के प्लेस आईडी से जुड़ जाती हैं. इससे कारोबार के डेटा के साथ, इंटिग्रेट की गई मैपिंग की सुविधा चालू हो जाती है.

Business Profile API की मदद से, अपॉइंटमेंट बुकिंग जैसी कार्रवाइयां बनाई जा सकती हैं. इन्हें अपने ऐप्लिकेशन में वापस लाया जा सकता है और दिखाया जा सकता है. हालांकि, इसे चालू करने के लिए कुछ मैन्युअल तरीके अपनाने होंगे. इनके बारे में यहां बताया गया है.

जब उपयोगकर्ता साइड पैनल में आपकी किसी जगह की जानकारी देखते हैं, तो उन्हें अपॉइंटमेंट बुक करने के लिए लिंक दिया जा सकता है. इस सेक्शन में, ऐसा करने का तरीका बताया गया है.

1. APPOINTMENT, ONLINE_APPOINTMENT या DINING_RESERVATION टाइप की जगह के लिए, Business Profile API placeActionLink बनाएं. placeActionLink वह ऑब्जेक्ट होगा जिसका इस्तेमाल, साइड पैनल में अपॉइंटमेंट के लिंक के लिए किया जाएगा. (अगर आपने अपॉइंटमेंट बुक करने के लिए, कार्रवाई करने का लिंक पहले ही बना लिया है, तो अगले चरण पर जाएं.) यहां placeActionLinks.create POST ऑपरेशन के सफल होने पर मिलने वाले जवाब का एक उदाहरण दिया गया है:

   {
       "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
       "providerType": "MERCHANT",
       "isEditable": true,
       "uri": "https://example.com/reservation-uri",
       "placeActionType": "DINING_RESERVATION",
       "createTime": "2021-05-01T01:17:41.609161Z",
       "updateTime": "2021-05-01T01:17:41.609161Z"
   }

2. Google Maps Platform के जगह के आईडी से जुड़ी Business Profile की जगह की जानकारी ढूंढें.

   जब उपयोगकर्ता, जगह की जानकारी देखते हैं, तो उन्हें Google Maps Platform के जगह के आईडी की जानकारी दिखती है. जगह का आईडी, Business Profile के लोकेशन आईडी से जुड़ा होता है. इसलिए, आपको मैप पर मौजूद जगह के आईडी के आधार पर लोकेशन आईडी ढूंढना होगा. इससे, आपको अपॉइंटमेंट बुक करने के लिए बनाया गया लिंक वापस पाने और उसे दिखाने में मदद मिलेगी. Business Profile API के ये कॉल करें:

   1. अपने प्रोजेक्ट के खातों की सूची बनाएं.
   2. Business Profile Business Information API का इस्तेमाल करके, किसी खाते में मौजूद सभी जगहों की सूची बनाएं.
   3. अपने readMask में metadata शामिल करें, ताकि नतीजे में मिली हर जगह की जानकारी में metadata.placeId शामिल हो. इसकी तुलना, Google Maps Platform पर देखी जा रही जगह के आईडी से की जा सकती है.

3. जगह के आईडी की मदद से, आपको अपनी पसंद का कार्रवाई करने का लिंक मिल सकता है. किसी मौजूदा अपॉइंटमेंट placeActionLink को वापस पाने के लिए, कारोबार की जगह के लिए मौजूदा placeActionLinks की सूची बनाएं. इसके बाद, placeActionType के लिए फ़िल्टर करें, ताकि आपको वह अपॉइंटमेंट लिंक मिल सके जिसका आपको इस्तेमाल करना है (APPOINTMENT, ONLINE_APPOINTMENT या DINING_RESERVATION).

   नीचे दिए गए उदाहरण में, LIST कॉल से मिले जवाब में APPOINTMENT placeActionLink दिखाया गया है.

    {
      "placeActionLinks": [
          {
              "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
              "providerType": "MERCHANT",
              "isEditable": true,
              "uri": "https://example.com/",
              "placeActionType": "APPOINTMENT",
              "createTime": "2021-05-01T01:17:41.609161Z",
              "updateTime": "2021-05-01T01:17:41.609161Z"
          }
      ]
    }

4. साइड पैनल में <div> बनाएं और उसे placeActionLink ऑब्जेक्ट के काम के डेटा से भरें. खास तौर पर, अपॉइंटमेंट बुकिंग लिंक का यूआरआई डालें.

अपॉइंटमेंट के लिंक जोड़ने के अन्य विकल्प

अगर आपके पास Business Profile को मैनेज करने की अनुमति नहीं है या आपको क्विक बिल्डर Locator Plus सलूशन का इस्तेमाल नहीं करना है, तो अपॉइंटमेंट बुक करने के लिए इस्तेमाल किए जाने वाले प्लैटफ़ॉर्म पर जाएं. वहां आपको वेबसाइट या ऐप्लिकेशन में बुकिंग विजेट को एम्बेड करने से जुड़ा दस्तावेज़ मिलेगा. इसके अलावा, Google Cloud का इस्तेमाल किया जा सकता है. जैसे, इन्वेंट्री मैनेजमेंट के लिए Cloud Spanner (वीडियो).

किसी जगह की जानकारी वाले साइड पैनल में, स्थानीय ऑफ़र दिखाए जा सकते हैं. उपयोगकर्ता इन ऑफ़र पर क्लिक कर सकते हैं. Google My Business API की मदद से, अपनी जगहों से जुड़ी "पोस्ट" (जैसे कि स्थानीय ऑफ़र) बनाई और वापस पाई जा सकती हैं. यहां दी गई इमेज में, जगह की जानकारी वाले साइड पैनल में स्थानीय ऑफ़र का उदाहरण दिखाया गया है.

क्विक बिल्डर सेक्शन में मौजूद आर्किटेक्चरल डायग्राम में, लोकेटर में ऑफ़र जोड़ने के लिए उपलब्ध टेक्नोलॉजी दिखाई गई हैं.

स्थानीय ऑफ़र, जगहों से जुड़े होते हैं. इसलिए, आपको Business Profile में जगह का वह आईडी ढूंढना होगा जो Google Maps Platform में जगह के उस आईडी से जुड़ा हो जिसे उपयोगकर्ता देख रहे हैं. Business Profile की जगह का आईडी होने पर, काम के ऑफ़र को localPost के तौर पर वापस पाया जा सकता है. इससे, ऑफ़र को जगह की जानकारी वाले साइड पैनल में दिखाया जा सकता है. इसका तरीका यहां बताया गया है:

1. Google My Business API की मदद से, ऑफ़र वाली कोई भी पोस्ट बनाएं जिसे आपको OFFER टाइप के तौर पर दिखाना है.

2. मैप पर मौजूद जगह के आईडी से जुड़ी Business Profile की जगह / जगह का आईडी ढूंढें.

   जब उपयोगकर्ता, जगह की जानकारी देखते हैं, तो उन्हें Google Maps Platform के जगह के आईडी की जानकारी दिखती है. जगह का आईडी, Business Profile के लोकेशन आईडी से जुड़ा होता है. इसलिए, आपको मैप पर जगह के आईडी के आधार पर लोकेशन आईडी ढूंढना होगा, ताकि आपकी जगह के लिए स्थानीय ऑफ़र का लिंक वापस लाया जा सके और उसे दिखाया जा सके. Business Profile API के ये कॉल करें:

   1. अपने प्रोजेक्ट के खातों की सूची बनाएं.
   2. Business Profile Business Information API का इस्तेमाल करके, किसी खाते में मौजूद सभी जगहों की सूची बनाएं.
   3. अपने readMask में metadata शामिल करें, ताकि हर जगह की जानकारी में metadata.placeId शामिल हो. इसे देखी जा रही जगह के आईडी से मैच किया जा सकता है.

   यहां दिए गए उदाहरण में, Business Profile Business Information API v1 से किसी जगह की जानकारी का अनुरोध किया गया है:

   GET https://mybusinessbusinessinformation.googleapis.com/v1/locations/15899957830169237700?readMask=name,title,phoneNumbers,categories,regularHours,storefrontAddress,latlng,openInfo,metadata,profile

   जवाब में एक metadata.placeId फ़ील्ड होता है. यह फ़ील्ड, Google Maps Platform के अनुरोधों में इस्तेमाल किए जाने वाले जगह के आईडी से जुड़ा होता है.

   जवाब का सैंपल देखने के लिए, इसे बड़ा करें.

   {
     "name": "locations/15899957830169237700",
     "title": "Sushi Sushi",
     "phoneNumbers": {
       "primaryPhone": "+49 2222 22222"
     },
     "categories": {
       "primaryCategory": {
         "name": "categories/gcid:restaurant",
         "displayName": "Restaurant"
       }
     },
     "regularHours": {
       "periods": [
         {
           "openDay": "MONDAY",
           "openTime": { "hours": 9, "minutes": 0 },
           "closeDay": "MONDAY",
           "closeTime": { "hours": 9, "minutes": 10 }
         },
         {
           "openDay": "TUESDAY",
           "openTime": { "hours": 11, "minutes": 30 },
           "closeDay": "TUESDAY",
           "closeTime": { "hours": 24, "minutes": 0 }
         }
       ]
     },
     "metadata": {
       "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
       "mapsUri": "https://maps.google.com/maps?cid=15899957830169237700"
     },
     "latlng": {
       "latitude": 1.3670033,
       "longitude": 103.8556385
     },
     "openInfo": {
       "status": "OPEN",
       "canReopen": true
     },
     "storefrontAddress": {
       "regionCode": "SG",
       "languageCode": "en-US",
       "postalCode": "560445",
       "addressLines": [
         "445 Ang Mo Kio Ave 10"
       ]
     },
     "profile": {
       "description": "Example restaurant"
     }
   }
         

3. अब आपके पास खाता और जगह के आईडी हैं. इसलिए, अपनी पसंद का ऑफ़र वापस पाएं. जगह की जानकारी को मैनेज करने के लिए, Business Profile Business Information API v1 का इस्तेमाल किया जाता है. हालांकि, Business Profile API के मंज़ूर किए गए प्रोजेक्ट के लिए, लोकल पोस्ट अब भी लेगसी mybusiness.googleapis.com/v4 accounts.locations.localPosts एंडपॉइंट पर मौजूद हैं. जगह के लिए मौजूदा localPosts की सूची बनाएं और OFFER के topicType के लिए फ़िल्टर करें.

   किसी जगह के लिए, चालू लोकल पोस्ट की सूची बनाने के अनुरोध का उदाहरण यहां दिया गया है:

   GET https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

   यहां दिए गए उदाहरण में, जवाब में OFFER localPost दिखाया गया है.

   जवाब का सैंपल देखने के लिए, इसे बड़ा करें.

   {
       "localPosts": [
           {
               "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
               "languageCode": "en",
               "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
               "state": "LIVE",
               "event": {
                   "title": "Bento BOGO",
                   "schedule": {
                       "startDate": {
                           "year": 2020,
                           "month": 1,
                           "day": 20
                       },
                       "startTime": {},
                       "endDate": {
                           "year": 2021,
                           "month": 1,
                           "day": 21
                       },
                       "endTime": {}
                   }
               },
               "updateTime": "2020-09-11T10:56:22.594Z",
               "createTime": "2020-09-11T10:56:22.594Z",
               "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
               "media": [
                   {
                       "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                       "mediaFormat": "PHOTO",
                       "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                   }
               ],
               "topicType": "OFFER",
               "offer": {
                   "couponCode": "BOGO-JET-CODE",
                   "redeemOnlineUrl": "https://www.example.com/redeem",
                   "termsConditions": "Offer only valid for order-ahead orders placed online."
               }
           },
       ],
   }
           

4. साइड पैनल में <div> बनाएं और उसे localPost ऑब्जेक्ट के काम के डेटा से भरें.

मैप के दिखने के तरीके और उसकी जानकारी में कई तरह से बदलाव किया जा सकता है. उदाहरण के लिए:

• डिफ़ॉल्ट मैप पिन की जगह, अपने कस्टम मार्कर बनाएं.
• मैप की सुविधाओं के रंग बदलकर, अपने ब्रैंड की पहचान को बेहतर तरीके से दिखाएं.
• यह कंट्रोल करें कि आपको कौनसी लोकप्रिय जगहें (पर्यटन स्थल, रेस्टोरेंट, होटल वगैरह) और कितनी डेंसिटी में दिखानी हैं. इससे आपको अपनी जगहों पर उपयोगकर्ता का ध्यान खींचने में मदद मिलती है. साथ ही, उन लैंडमार्क को हाइलाइट करने में मदद मिलती है जो उपयोगकर्ताओं को सबसे नज़दीकी जगह तक पहुंचने में मदद करते हैं.

ज़रूरत के मुताबिक तैयार मैप मार्कर बनाना

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

यहां एक सैंपल मैप दिया गया है, जिसमें कस्टम ग्राफ़िक मार्कर का इस्तेमाल किया गया है. 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_locatorplus_v2_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 में क्लाउड पर मैप की स्टाइलिंग को शामिल करने के बारे में ज़्यादा जानें.

Analytics का इस्तेमाल करके, आपको इस बारे में अहम जानकारी मिल सकती है कि उपयोगकर्ता आपके लोकेटर के साथ कैसे इंटरैक्ट करते हैं. इस सेक्शन में, Google Analytics और Business Profile के आंकड़ों को कॉन्फ़िगर और मॉनिटर करने के बारे में बताया गया है. इससे आपको ज़रूरी डेटा ट्रैक करने में मदद मिलेगी. Quick Builder Locator Plus के उपयोगकर्ताओं के लिए, Analytics डैशबोर्ड की मदद से, पहचान ज़ाहिर किए बिना डेटा का विश्लेषण किया जा सकता है और अहम जानकारी जनरेट की जा सकती है.

इस रिपोर्ट को ऐक्सेस करने के लिए, Cloud Console के यूज़र ऐक्टिविटी की रिपोर्ट सेक्शन पर जाएं. इस रिपोर्ट के बारे में ज़्यादा जानने के लिए, यूज़र ऐक्टिविटी की रिपोर्ट देखें.

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

Google Analytics सेट अप करना

अगर आपके ऐप्लिकेशन में पहले से ही Google Analytics का इस्तेमाल किया जा रहा है, तो इस सेक्शन को छोड़ा जा सकता है.

यहां "ग्लोबल टैग" का एक उदाहरण दिया गया है. इसे अपनी साइट पर चिपकाकर, Google Analytics को चालू किया जा सकता है.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

चाहे Google Tag Manager का इस्तेमाल किया जा रहा हो या Google Analytics को सीधे अपनी साइट में जोड़ा जा रहा हो, यह समझना ज़रूरी है कि Google Analytics को लागू करने के तरीके का इस्तेमाल करके, ये काम कैसे किए जा सकते हैं:

• क्लिक जैसे उपयोगकर्ता इंटरैक्शन ट्रिगर करना, जिन्हें वेबसाइट के पेज व्यू (इवेंट) से अलग मेज़र किया जा सकता है.
• काम के ग्रुप (डाइमेंशन या कस्टम डाइमेंशन) में रॉ डेटा (मेट्रिक) देखें.

कस्टम इवेंट का इस्तेमाल करना

यहां आपके लोकेटर में कस्टम इवेंट तय करने का उदाहरण दिया गया है:

gtag('event', 'location', {
  'method': 'address'
});

अपने event और method को साफ़ तौर पर नाम देना ज़रूरी है, ताकि आप रिपोर्टिंग में इवेंट को समझ सकें. उन्हें उन खास इंटरैक्शन के लिए ट्रिगर करें जिन्हें आपको मेज़र करना है. जैसे, जब कोई उपयोगकर्ता अपने-आप पूरा होने वाली ड्रॉप-डाउन सूची से कोई पता चुनता है, जैसा कि नीचे दी गई इमेज में दिखाया गया है.

Google Analytics को नीचे दिया गया ट्रैकिंग कॉल भेजा जा सकता है. यह कॉल, आपके तय किए गए इवेंट और तरीके का इस्तेमाल करता है. (हम हर क्वेरी पैरामीटर को अलग-अलग लाइन में दिखाएंगे, ताकि उसे आसानी से पढ़ा जा सके.)

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

यहां दी गई इमेज में दिखाया गया है कि Google Analytics कॉल, ब्राउज़र के 'जांच करें' व्यू में, नेटवर्क टैब पर कैसे दिखता है. (बड़ा करने के लिए क्लिक करें).

Google Analytics में "रीयल-टाइम" व्यू देखकर, यह पुष्टि की जा सकती है कि आपके कस्टम इवेंट टैग सही तरीके से कैप्चर किए जा रहे हैं या नहीं. उदाहरण के लिए, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के लिए पहले सेट अप किया गया "location" इवेंट, Google Analytics में दिखता है. इसकी जानकारी यहां दी गई इमेज में दी गई है.

इसके अलावा, DebugView का इस्तेमाल करके रीयल-टाइम इवेंट को मॉनिटर किया जा सकता है. इसके बारे में यहां दी गई इमेज में बताया गया है. ध्यान दें कि Google Analytics के यूज़र ऐक्टिविटी > इवेंट सेक्शन में, इवेंट की पूरी रिपोर्ट ऐक्सेस करने के लिए आपको 24 घंटे इंतज़ार करना होगा.

लोकेटर ऐप्लिकेशन की मदद से, अपने स्टोर या कारोबार की जगह पर आने वाले लोगों की संख्या बढ़ाने के लिए रणनीतियां बनाई जा सकती हैं और उन्हें मेज़र किया जा सकता है. उदाहरण के लिए, Google Analytics में Analytics में स्टोर विज़िट की सुविधा है. यह सुविधा, स्टोर विज़िट के आंकड़ों (Google Ads से मेज़र किए गए) को आपके लोकेटर के आंकड़ों से लिंक करती है. ऐप्लिकेशन से स्टोर तक ग्राहकों को लाने के लिए, अपनी रणनीतियां भी बनाई जा सकती हैं. जैसे, ऑनलाइन ऑफ़र जिन्हें स्टोर पर जाकर रिडीम किया जा सकता है.

Business Profile की मेट्रिक

Google Analytics की मदद से इवेंट, मेट्रिक, और डाइमेंशन को ट्रैक करने के अलावा, Business Profile Performance API से जगह के हिसाब से यूज़र ऐक्टिविटी मेट्रिक के बारे में क्वेरी की जा सकती है. DailyMetric की उपलब्ध वैल्यू से, Search और Maps पर मिले इंप्रेशन, दिशा-निर्देश पाने के अनुरोध, वेबसाइट और कॉल के लिए क्लिक, और Reserve with Google के ज़रिए की गई बुकिंग को ट्रैक किया जा सकता है.

यहां दिए गए सैंपल अनुरोध में, किसी जगह के लिए रोज़ के इंप्रेशन, रास्ते की जानकारी पाने के अनुरोध, वेबसाइट पर ले जाने वाले क्लिक, और बुकिंग की जानकारी पाने के लिए, locations.fetchMultiDailyMetricsTimeSeries को कॉल किया जाता है:

GET https://businessprofileperformance.googleapis.com/v1/locations/15899957830169237700:fetchMultiDailyMetricsTimeSeries?dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_SEARCH&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_SEARCH&dailyMetrics=BUSINESS_DIRECTION_REQUESTS&dailyMetrics=WEBSITE_CLICKS&dailyMetrics=BUSINESS_BOOKINGS&dailyRange.start_date.year=2025&dailyRange.start_date.month=1&dailyRange.start_date.day=1&dailyRange.end_date.year=2025&dailyRange.end_date.month=1&dailyRange.end_date.day=31

{
  "multiDailyMetricTimeSeries": [
    {
      "dailyMetricTimeSeries": [
        {
          "dailyMetric": "BUSINESS_IMPRESSIONS_DESKTOP_MAPS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "48"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_IMPRESSIONS_MOBILE_MAPS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "112"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_DIRECTION_REQUESTS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "14"
              }
            ]
          }
        },
        {
          "dailyMetric": "WEBSITE_CLICKS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "29"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_BOOKINGS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "6"
              }
            ]
          }
        }
      ]
    }
  ]
}

हर dailyMetricTimeSeries एंट्री, अनुरोध की गई तारीख की सीमा के हिसाब से रोज़ की संख्या दिखाती है. इसमें ये शामिल हैं:

• Google Maps और Google Search पर डेस्कटॉप और मोबाइल इंप्रेशन.
• कारोबार की जगह तक पहुंचने के लिए दिशा-निर्देश पाने के अनुरोध (BUSINESS_DIRECTION_REQUESTS).
• कारोबार की वेबसाइट पर मिले क्लिक (WEBSITE_CLICKS) और Reserve with Google के ज़रिए की गई बुकिंग (BUSINESS_BOOKINGS).

मेट्रिक का एक अन्य विकल्प, Reserve with Google का इस्तेमाल करके कार्रवाई करने के लिंक बनाना है. जब उपयोगकर्ता, Reserve with Google में बनाए गए कार्रवाई करने के लिंक पर क्लिक करते हैं, तो उन कार्रवाइयों को Google Analytics में लॉग किया जा सकता है. इससे आपको Google Analytics में कन्वर्ज़न ट्रैक करने में मदद मिलती है. ज़्यादा जानकारी के लिए, कन्वर्ज़न ट्रैकिंग का दस्तावेज़ देखें.

मेट्रिक की रणनीति चाहे जो भी हो, मेज़रमेंट का मतलब सिर्फ़ यह देखना नहीं है कि केपीआई के हिसाब से आपकी परफ़ॉर्मेंस कैसी है. इन नंबर से आपको यह समझने में भी मदद मिलती है कि लोकेटर में किए गए इन सुधारों से आपके कारोबार पर क्या असर पड़ता है. इसके अलावा, स्टोर लोकेटर पर Google Analytics से मिली मेट्रिक की तुलना, Business Profile की मेट्रिक से की जा सकती है. उदाहरण के लिए, इन मेट्रिक की तुलना करके यह देखा जा सकता है कि कितने ग्राहक आपके स्टोर की जगह पर पहुंचने के लिए, स्टोर लोकेटर और Google Maps से निर्देश पाते हैं.

Locator Plus को बेहतर बनाना

अपने कारोबार या उपयोगकर्ताओं की ज़रूरतों के हिसाब से, उपयोगकर्ता अनुभव को और बेहतर बनाया जा सकता है.

उपयोगकर्ताओं के लिए किसी जगह पर पहुंचना और भी आसान बनाने के लिए, उन्हें निर्देश देने वाला लिंक टेक्स्ट या ईमेल किया जा सकता है. इस पर क्लिक करने पर, अगर उनके फ़ोन में 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 क्वेरी पैरामीटर देने का विकल्प भी है. इसके लिए, डेस्टिनेशन के पते के फ़ॉर्मैट का ही इस्तेमाल करें. हालांकि, इसे शामिल न करने पर, निर्देश उपयोगकर्ता की मौजूदा जगह से शुरू होते हैं. यह जगह, उस जगह से अलग हो सकती है जहां से उपयोगकर्ता ने आपके Locator Plus ऐप्लिकेशन का इस्तेमाल किया था. Maps के यूआरएल में क्वेरी पैरामीटर के अन्य विकल्प भी होते हैं. जैसे, नेविगेशन चालू करके निर्देश पाने के लिए, travelmode और dir_action=navigate.

क्लिक किए जा सकने वाले इस लिंक में, ऊपर दिए गए उदाहरण वाले यूआरएल को बड़ा किया गया है. इसमें origin को लंदन के फ़ुटबॉल स्टेडियम के तौर पर सेट किया गया है. साथ ही, मंज़िल तक पहुंचने के लिए बस, मेट्रो वगैरह के रास्ते के निर्देश देने के लिए, travelmode=transit का इस्तेमाल किया गया है.

इस यूआरएल वाला मैसेज या ईमेल भेजने के लिए, हमारा सुझाव है कि आप तीसरे पक्ष के किसी ऐप्लिकेशन का इस्तेमाल करें. जैसे, twilio. अगर App Engine का इस्तेमाल किया जा रहा है, तो एसएमएस या ईमेल भेजने के लिए, तीसरे पक्ष की कंपनियों का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, तीसरे पक्ष की सेवाओं का इस्तेमाल करके मैसेज भेजना लेख पढ़ें.

दुनिया की कई जगहों के लिए, Street View का इस्तेमाल करके किसी जगह के बाहरी हिस्से को दिखाया जा सकता है. इससे उपयोगकर्ताओं को वहां पहुंचने से पहले ही, उस जगह की विज़ुअल जानकारी मिल जाती है. Street View को इंटरैक्टिव (वेब) या स्टैटिक (एपीआई) फ़ॉर्म में उपलब्ध कराया जा सकता है. यह इस बात पर निर्भर करता है कि आपको उपयोगकर्ताओं को 360 डिग्री में इलाके को "आस-पास देखने" की सुविधा देनी है या नहीं. Street View, Android और iOS के लिए भी उपलब्ध है.

ज़्यादातर मामलों में, उपयोगकर्ता के डिवाइस या ब्राउज़र में मौजूद, जगह की जानकारी का डेटा इस्तेमाल करने वाली सेवाओं की मदद से, उसकी जगह की सटीक जानकारी का पता लगाया जा सकता है. हम Google मैप पर किसी उपयोगकर्ता या डिवाइस की भौगोलिक जगह की जानकारी दिखाने के लिए, ब्राउज़र की HTML5 जियोलोकेशन सुविधा का इस्तेमाल करने का उदाहरण देते हैं. साथ ही, Android और iOS में अनुमतियों का अनुरोध करने और जगह की जानकारी पाने के बारे में दस्तावेज़ उपलब्ध कराते हैं. हालांकि, कुछ मामलों में आपको जगह की जानकारी का पता लगाने के लिए, किसी अन्य तरीके की ज़रूरत पड़ सकती है. उदाहरण के लिए, अगर डिवाइस की जगह की जानकारी देने वाली सेवाएं बंद हैं या आपको लगता है कि डिवाइस की जगह की जानकारी को स्पूफ़ किया गया है.

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

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

Places API (नया) में, अलग-अलग डेटा फ़ील्ड की कीमत और एसकेयू टियर को समझना मददगार होता है. लागत को मैनेज करने के लिए, एक रणनीति यह है कि अपनी जगहों के बारे में आपके पास पहले से मौजूद जानकारी को Google Maps से मिली नई जानकारी के साथ जोड़ें. जैसे, कुछ समय के लिए बंद होने की जानकारी, छुट्टियों के दौरान खुले होने का समय, उपयोगकर्ता रेटिंग, फ़ोटो, और समीक्षाएं. अगर आपके पास अपनी जगहों की संपर्क जानकारी पहले से मौजूद है, तो आपको Place Details से उन फ़ील्ड का अनुरोध करने की ज़रूरत नहीं होगी. साथ ही, फ़ील्ड मास्क को सिर्फ़ उन फ़ील्ड को फ़ेच करने के लिए सीमित किया जा सकता है जिन्हें आपको दिखाना है.

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