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

खास जानकारी

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

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

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

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

• Maps JavaScript API
• Location API
• जियोकोडिंग एपीआई
• दूरी का मैट्रिक्स एपीआई
• दिशा-निर्देशों के लिए एपीआई

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

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

नीचे इस विषय में लागू किए जाने वाले वे तरीके और कस्टमाइज़ेशन दिए गए हैं जिन पर हम चर्चा करेंगे.

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

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

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

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

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

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

ऑटोकंप्लीट सुविधा का इस्तेमाल करके टाइप की गई एंट्री मैनेज करना

आज के उपयोगकर्ता Google मैप के उपभोक्ता वर्शन पर लागू होती है. इस सुविधा को किसी भी मोबाइल डिवाइस पर Google Maps Platform Places लाइब्रेरी का इस्तेमाल करने वाला ऐप्लिकेशन और वेब. जब कोई उपयोगकर्ता पता टाइप करता है, तो बाकी फ़ील्ड में ऑटोकंप्लीट की सुविधा भर जाती है आसानी से ऐक्सेस किया जा सकता है. अपना ऑटोकंप्लीट की सुविधा भी दी जा सकती है सुविधा सीधे Places लाइब्रेरी का इस्तेमाल करके काम करती है.

निम्न उदाहरण में, libraries=places पैरामीटर को Maps JavaScript API का स्क्रिप्ट यूआरएल.

<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, आपके उपयोगकर्ताओं को उनके लिए सबसे सुविधाजनक स्थान को ड्राइविंग समय या सड़क की दूरी के आधार पर तय करें.

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

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

नीचे दिए गए उदाहरण में दूरी मैट्रिक्स सेवा, Maps JavaScript API, जिसमें उपयोगकर्ता की एक बार में ऑरिजिन और 25 स्टोर लोकेशन.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

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

आप स्थान की समृद्ध जानकारी जैसे संपर्क जानकारी, संचालन के घंटे, साथ ही, कारोबार की मौजूदा स्थिति की मदद से, ग्राहकों को उनकी पसंदीदा जगह चुनने में मदद मिलेगी या वह उनके ऑर्डर को पूरा करता है.

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

जगह की जानकारी का अनुरोध करने के लिए, आपको अपने हर स्थान के स्थान आईडी की ज़रूरत होगी. अपने आईडी को फिर से पाने के लिए, जगह के आईडी पाना देखें स्थान.

नीचे दी गई जगह की जानकारी के लिए किए गए अनुरोध की मदद से पता, निर्देशांक, वेबसाइट, 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);
  }
}

प्रॉडक्ट लोकेटर को बेहतर बनाना

आपके कारोबार या उपयोगकर्ताओं के तो उपयोगकर्ता की ज़रूरतों को पूरा करने के लिए, अनुभव.

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

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

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

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

<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 फ़ंक्शन का इस्तेमाल किया जाता है. यह फ़ंक्शन तब काम करता है, जब पेज लोड होता है. URL में, आप अपने मैप की भाषा या इलाके को बदलकर यह पक्का करें कि इसे सही तरीके से फ़ॉर्मैट किया गया हो इसके लिए, आपको उस देश में कुछ खोज नतीजे दिखेंगे. क्षेत्र सेट करने से यह भी पक्का होता है कि अमेरिका के बाहर इस्तेमाल किए जाने वाले ऐप्लिकेशन का व्यवहार, क्षेत्र तय करें. 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 में, मैप स्टाइल बनाए जा सकते हैं या उनमें बदलाव किया जा सकता है मैप की स्टाइल पेज पर प्रोजेक्ट.

मैप की स्टाइल बनाने के ऐनिमेशन देखने के लिए बड़ा करें और स्टाइलिंग के बारे में ज़्यादा जानें:

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

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

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

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

हर मैप स्टाइल का अपना आईडी होता है. आपके द्वारा इसमें कोई शैली प्रकाशित करने के बाद 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 का इस्तेमाल करने का उदाहरण दिया गया है का इस्तेमाल करें.