Google Maps Platform (JavaScript) की मदद से आस-पास के कारोबार के लिए खोज सेवा बनाएं

Google Maps Platform (JavaScript) की मदद से आस-पास के कारोबार के लिए खोज सेवा बनाएं

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

subjectपिछली बार दिस॰ 3, 2021 को अपडेट किया गया
account_circleAngela Yu ने लिखा

1. शुरू करने से पहले

स्थानीय कारोबार खोज बनाने के लिए Google Maps Platform Maps और 'जगहें' एपीआई का इस्तेमाल करना सीखें, जो उपयोगकर्ताओं का भौगोलिक स्थान ढूंढता है और आस-पास के दिलचस्प स्थान दिखाता है. यह ऐप्लिकेशन भौगोलिक स्थान, जगह की जानकारी, जगह की फ़ोटो वगैरह को एकीकृत करता है.

ज़रूरी शर्तें

  • एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
  • बिलिंग खाते वाला प्रोजेक्ट (अगर आपके पास #39 नहीं है, तो अगले चरण में दिए गए निर्देशों का पालन करें).
  • नीचे चालू करने का तरीका जानने के लिए, आपको Maps JavaScript API और जगहें एपीआई चालू करना होगा.
  • ऊपर के प्रोजेक्ट के लिए एक API (एपीआई) कुंजी.

Google Maps Platform का इस्तेमाल शुरू करें

अगर आपने पहले Google Maps Platform का इस्तेमाल नहीं किया है, तो Google Maps Platform गाइड का इस्तेमाल शुरू करें या नीचे दिया गया तरीका अपनाने के लिए, Google Maps Platform प्लेलिस्ट का इस्तेमाल शुरू करें:

  1. बिलिंग खाता बनाएं.
  2. प्रोजेक्ट बनाएं.
  3. Google Maps Platform API और SDK टूल चालू करें (पिछले सेक्शन में दी गई है).
  4. एपीआई कुंजी जनरेट करें.

आप क्या कर सकते हैं

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

ae1caf211daa484d.png

आपको क्या चाहिए

  • वेब ब्राउज़र, जैसे कि Google Chrome (सुझाया गया), Firefox, Safari या Internet Explorer
  • आपका पसंदीदा टेक्स्ट या कोड एडिटर

सैंपल कोड पाएं

  1. अपना कमांड-लाइन इंटरफ़ेस (MacOS पर टर्मिनल या Windows पर कमांड प्रॉम्प्ट) खोलें और इस निर्देश के साथ सैंपल कोड डाउनलोड करें:
git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

अगर इससे काम नहीं होता, तो इस कोडलैब के सभी कोड डाउनलोड करने के लिए, नीचे दिए गए बटन पर क्लिक करें. इसके बाद, फ़ाइल को अनज़िप करें:

कोड डाउनलोड करें

  1. उस डायरेक्ट्री में बदलें जिसे आपने अभी-अभी क्लोन किया या डाउनलोड किया है.
cd google-maps-nearby-search-js

stepN फ़ोल्डर में इस कोडलैब के हर चरण की ज़रूरत के मुताबिक खत्म होने की स्थिति होती है. रेफ़रंस के लिए, ये पेज देख सकते हैं. कोडिंग का काम, work नाम की डायरेक्ट्री में करें.

2. डिफ़ॉल्ट केंद्र के साथ मैप बनाना

आपके वेब पेज पर Google मैप बनाने के तीन चरण हैं:

  1. एचटीएमएल पेज बनाना
  2. एक मैप जोड़ें
  3. अपनी एपीआई कुंजी चिपकाएं

1. एचटीएमएल पेज बनाना

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

569b9781658fec74.png

  1. डायरेक्ट्री को अपने work/ फ़ोल्डर में बदलें. कोडलैब के बाकी बचे हिस्से में, work/ फ़ोल्डर के वर्शन में बदलाव करें.
cd work
  1. work/ डायरेक्ट्री में, index.html नाम की खाली फ़ाइल बनाने के लिए, टेक्स्ट एडिटर का इस्तेमाल करें.
  2. नीचे दिए गए कोड को index.html में कॉपी करें.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>
  1. अपने वेब ब्राउज़र पर index.html फ़ाइल खोलें.
open index.html

2. मैप जोड़ना

यह सेक्शन आपको बताता है कि Maps JavaScript API को आपके वेब पेज में कैसे लोड किया जाता है. साथ ही, यह भी बताया जाता है कि वेब पेज में मैप जोड़ने के लिए एपीआई का इस्तेमाल करने वाला अपना JavaScript कैसे बनाएं.

  1. यह स्क्रिप्ट कोड जोड़ें, जहां आपको map div के बाद और क्लोज़ </body> टैग के पहले <!-- TODO: Step 1B, Add a map --> दिखता है.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. अपनी एपीआई कुंजी चिपकाएं

  1. <!-- TODO: Step 1C, Get an API key --> के बाद की लाइन में, स्क्रिप्ट सोर्स यूआरएल में मौजूद कुंजी पैरामीटर की वैल्यू को कॉपी करें और उसे पहले से ज़रूरी शर्तों के दौरान बनाई गई एपीआई कुंजी से बदलें.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
  1. वह HTML फ़ाइल सेव करें जिस पर आप काम कर रहे थे.

इसे आज़माएं

आप जिस फ़ाइल में बदलाव कर रहे हैं उसके ब्राउज़र व्यू को फिर से लोड करें. आपको अब एक ऐसा मैप दिखाई देगा, जहां स्लेटी रंग का आयत पहले था. अगर आपको गड़बड़ी का मैसेज दिखता है, तो पक्का करें कि आपने फ़ाइनल एपीआई <script> टैग में अपनी API (एपीआई) कुंजी को &&tt से बदल दिया है.YOUR_API_KEY अगर आपके पास पहले से API (एपीआई) कुंजी नहीं है, तो ऊपर दी गई कुंजी को पाने का तरीका देखें.

पूरा सैंपल कोड

इस पॉइंट तक इस प्रोजेक्ट के लिए पूरा कोड GitHub पर उपलब्ध है.

3. अपने उपयोगकर्ता का भौगोलिक स्थान

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

यहां एक ऐसे मैप का उदाहरण दिया गया है जो माउंटेन व्यू, कैलिफ़ोर्निया से ब्राउज़ करने पर आपकी भौगोलिक जगह दिखाता है:

1db3fec117cd895.png

भौगोलिक स्थान (लोकेशन) क्या है?

भौगोलिक स्थान का मतलब है, डेटा इकट्ठा करने के कई तरीकों से किसी उपयोगकर्ता या कंप्यूटिंग डिवाइस की भौगोलिक जगह की पहचान करना. आम तौर पर, इस जगह का पता लगाने के लिए ज़्यादातर भौगोलिक स्थान सेवाएं नेटवर्क रूटिंग पतों या अंदरूनी जीपीएस डिवाइस का इस्तेमाल करती हैं. यह ऐप्लिकेशन, उपयोगकर्ता के ब्राउज़र की जगह का पता लगाने के लिए, वेब ब्राउज़र की W3C भौगोलिक स्थान मानक navigator.geolocation प्रॉपर्टी का इस्तेमाल करता है.

इसे खुद आज़माएं

टिप्पणियों के बीच TODO: Step 2, Geolocate your user और END TODO: Step 2, Geolocate your user कोड को नीचे दिए गए कोड से बदलें:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

इसे आज़माएं

  1. अपनी फ़ाइल सहेजें.
  2. अपना पेज फिर से लोड करें.

अब आपके ब्राउज़र को आपसे जगह की जानकारी शेयर करने के लिए, ऐप्लिकेशन के साथ अनुमति लेनी होगी.

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

पूरा सैंपल कोड

इस पॉइंट तक इस प्रोजेक्ट के लिए पूरा कोड GitHub पर उपलब्ध है.

4. आस-पास की जगहें खोजें

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

  • आयताकार खोज की जगह तय करने वाला LatLngBounds ऑब्जेक्ट
  • location प्रॉपर्टी के कॉम्बिनेशन के तौर पर परिभाषित किया गया एक गोलाकार इलाका - सर्कल के बीच को LatLng ऑब्जेक्ट के तौर पर बताता है — और मीटर में मापा जाता है

PlacesService nearbySearch() विधि पर कॉल करके आस-पास खोज शुरू करें, जिससे PlaceResult ऑब्जेक्ट की श्रेणी मिल जाएगी.

A. जगहें लाइब्रेरी लोड करना

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

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. आस-पास मौजूद जगहों की खोज को कॉल करें जवाब दें और उन्हें हैंडल करें

इसके बाद, PlaceSearch के लिए अनुरोध करें. कम से कम ज़रूरी फ़ील्ड हैं:

कम से कम ज़रूरी फ़ील्ड हैं:

  • bounds, जो कि google.maps.LatLngBounds ऑब्जेक्ट होना चाहिए, जो कि रेक्टैंगल के आकार वाली खोज के इलाके को तय करता है. या एक location और radius होता है. पहले ऑब्जेक्ट के लिए एक google.maps.LatLng ऑब्जेक्ट लिया जाता है. वहीं, बाद वाला ऑब्जेक्ट एक सामान्य पूर्णांक लेता है, जो सर्कल और #39; के दायरे को मीटर में दिखाता है. ज़्यादा से ज़्यादा 50,000 मीटर की अनुमति है. ध्यान रखें कि जब rankBy को DISTANCE पर सेट किया जाता है, तो आपको कोई जगह बताना होगा. हालांकि, आप कोई खास दायरा या सीमा तय नहीं कर सकते.
  • सभी उपलब्ध फ़ील्ड से मिलान करने के लिए keyword, जिसमें नाम, टाइप और पता, साथ ही ग्राहक समीक्षाएं और अन्य तीसरे पक्ष का कॉन्टेंट शामिल है, लेकिन यह इन तक सीमित नहीं है या type, जो खास तरह के मेल खाने वाले स्थानों तक नतीजों को प्रतिबंधित करता है. सिर्फ़ एक टाइप तय किया जा सकता है (अगर एक से ज़्यादा टाइप दिए गए हैं, तो पहली एंट्री के बाद के सभी टाइप को अनदेखा कर दिया जाता है). इस्तेमाल किए जा सकने वाले टाइप की सूची देखें.

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

  1. खोज पर कॉल करने और रिस्पॉन्स मैनेज करने के लिए, दो फ़ंक्शन लिखने के लिए TODO: Step 3B1 टिप्पणी में इन्हें जोड़ें.

sushi कीवर्ड का इस्तेमाल खोज के लिए शब्द के तौर पर किया जाता है, लेकिन आप इसे बदल सकते हैं. createMarkers फ़ंक्शन के बारे में बताने वाला कोड अगले सेक्शन में दिया गया है.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */
  1. टिप्पणी TODO: Step 3B2 पर initMap फ़ंक्शन के आखिर में यह लाइन जोड़ें.
/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);
  1. टिप्पणी TODO: Step 3B3 पर handleLocationError फ़ंक्शन के आखिर में यह लाइन जोड़ें.
/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. खोज के नतीजों के लिए मार्कर जनरेट करना

मार्कर, मैप पर किसी जगह की पहचान करता है. डिफ़ॉल्ट रूप से, मार्कर एक स्टैंडर्ड इमेज का इस्तेमाल करता है. मार्कर इमेज को पसंद के मुताबिक बनाने के बारे में जानकारी के लिए, मार्कर देखें.

google.maps.Marker कंस्ट्रक्टर, मार्कर की शुरुआती प्रॉपर्टी बताते हुए एक Marker options ऑब्जेक्ट लिटरल में लेता है.

ये फ़ील्ड खास तौर पर अहम हैं और आम तौर पर मार्कर बनाते समय सेट किए जाते हैं:

  • position (ज़रूरी है) मार्कर की शुरुआती जगह की पहचान करने वाला LatLng बताता है.
  • map (ज़रूरी नहीं) उस मैप के बारे में बताता है जिस पर मार्कर लगाया जाना है. अगर आप मार्कर बनाते समय मैप निर्दिष्ट नहीं करते हैं, तो मार्कर बनाया जाता है, लेकिन वह मैप से अटैच (या प्रदर्शित) नहीं होता है. आप बाद में मार्कर's setMap() वाले तरीके को कॉल करके मार्कर जोड़ सकते हैं.
  • जवाब में दिए गए हर मार्कर के लिए, स्थिति, मैप, और शीर्षक सेट करने के लिए, TODO: Step 3C टिप्पणी के बाद इन कोड को जोड़ें. आप bounds वैरिएबल के extend तरीके का इस्तेमाल करके, यह भी पक्का कर सकते हैं कि मैप पर बीच और सभी मार्कर दिखें.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

इसे आज़माएं

  1. पेज को सेव करें और फिर से लोड करें और भौगोलिक स्थान की अनुमतियां देने के लिए अनुमति दें पर क्लिक करें.

आपको मैप के बीच वाले हिस्से के आस-पास 20 लाल मार्कर दिखेंगे.

  1. पेज को फिर से लोड करें और इस बार भौगोलिक स्थान से जुड़ी अनुमतियों को ब्लॉक करें.

क्या आपको अब भी अपने मैप के डिफ़ॉल्ट केंद्र पर परिणाम मिलते हैं (नमूना में डिफ़ॉल्ट रूप से सिडनी, ऑस्ट्रेलिया में है)?

पूरा सैंपल कोड

इस पॉइंट तक इस प्रोजेक्ट के लिए पूरा कोड GitHub पर उपलब्ध है.

5. मांग पर जगह की जानकारी दिखाएं

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

A. जेनरिक साइडबार बनाना

स्थान विवरण प्रदर्शित करने के लिए आपको एक स्थान की आवश्यकता होगी, इसलिए यहां साइडबार के लिए कुछ सरल कोड दिया गया है, जिसका उपयोग आप उपयोगकर्ता के किसी मार्कर पर क्लिक करने पर कर सकते हैं.

  1. टिप्पणी TODO: Step 4A1 के बाद, style टैग में यह कोड जोड़ें:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}
  1. map सेक्शन से ठीक पहले body सेक्शन में, ज़्यादा जानकारी वाले पैनल के लिए एक div जोड़ें.
<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>
  1. TODO: Step 4A3 टिप्पणी के बाद initMap() फ़ंक्शन में, infoPane वैरिएबल को इस तरह शुरू करें:
/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. मार्कर में क्लिक लिसनर जोड़ें

  1. createMarkers फ़ंक्शन में, हर मार्कर को बनाते समय क्लिक लिसनर के तौर पर जोड़ें.

क्लिक लिसनर, उस मार्कर से जुड़ी जगह की जानकारी फ़ेच करता है और फ़ंक्शन को कॉल करके जानकारी दिखाता है.

  1. निम्न टिप्पणी को कोड टिप्पणी TODO: Step 4B पर createMarkers फ़ंक्शन में पेस्ट करें.

showDetails तरीके को अगले सेक्शन में लागू किया गया है.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

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

C. जानकारी वाली विंडो में जगह की जानकारी दिखाना

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

  1. TODO: Step 4C टिप्पणी पर यह कोड जोड़ें, ताकि कारोबार का नाम और रेटिंग दिखाने वाला InfoWindow बनाया जा सके. साथ ही, इस विंडो को मार्कर से अटैच किया जा सके.

साइडबार में जानकारी दिखाने के लिए, आप अगले सेक्शन में showPanel के बारे में बताते हैं.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

D. साइडबार में साइडबार की जानकारी लोड करना

किसी दूसरे div को पॉप्युलेट करने के लिए PlaceResult ऑब्जेक्ट में लौटाए गए विवरण का इस्तेमाल करें. इस नमूने में, infoPane का इस्तेमाल करें जो आईडी &कोटेशनpanel का उपयोग करने वाला एक आर्बिट्ररी वैरिएबल नाम होता है. जब भी उपयोगकर्ता किसी नए मार्कर पर क्लिक करता है, तब यह कोड साइडबार को बंद कर देता है, अगर यह पहले से खुला हुआ है, तो पुरानी जानकारी मिटा देता है, नए विवरण जोड़ता है, और साइडबार खोलता है.

  1. टिप्पणी TODO: Step 4D के बाद यह कोड जोड़ें.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. स्थान की जानकारी के साथ कोई जगह फ़ोटो दिखाएं

getDetails से जुड़े नतीजे के तौर पर, placeId से जुड़ी 10 फ़ोटो की रेंज दिखाई जाती है. यहां, आप साइडबार में स्थान के नाम के ऊपर पहली फ़ोटो दिखाते हैं.

  1. अगर आप चाहते हैं कि फ़ोटो साइडबार के ऊपर दिखे, तो name कोड बनाने से पहले यह कोड डालें.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

इसे आज़माएं

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

ae1caf211daa484d.png

पूरा सैंपल कोड

इस पॉइंट तक इस प्रोजेक्ट के लिए पूरा कोड GitHub पर उपलब्ध है.

6. बधाई हो

बधाई हो! आपने Maps JavaScript API की कई सुविधाओं का इस्तेमाल किया है, जिनमें Places लाइब्रेरी भी शामिल है.

हमने क्या-क्या शामिल किया है

ज़्यादा जानें

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

आप अगली बार किस तरह का कोडलैब बनाना चाहते हैं?

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

bug_report गलती की शिकायत करें