इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

Google Maps Platform Maps और Places API का इस्तेमाल करके, स्थानीय कारोबारों को खोजने की सुविधा बनाने का तरीका जानें. इससे उपयोगकर्ता की जगह की जानकारी मिलती है और आस-पास की दिलचस्प जगहों के बारे में पता चलता है. इस ऐप्लिकेशन में, भौगोलिक जगह की जानकारी, जगह की ज़्यादा जानकारी, जगह की फ़ोटो वगैरह को इंटिग्रेट किया गया है.

ज़रूरी शर्तें

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

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

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

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

आपको क्या करना होगा

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

आपको इन चीज़ों की ज़रूरत होगी

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

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

अपने कमांड-लाइन इंटरफ़ेस (MacOS पर टर्मिनल या Windows पर कमांड प्रॉम्प्ट) को खोलें. इसके बाद, इस कमांड का इस्तेमाल करके सैंपल कोड डाउनलोड करें:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

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

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

उस डायरेक्ट्री में जाएं जिसे आपने अभी-अभी क्लोन या डाउनलोड किया है.

cd google-maps-nearby-search-js

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

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

अपने वेब पेज पर Google मैप बनाने के लिए, ये तीन चरण पूरे करें:

एचटीएमएल पेज बनाना
मैप जोड़ना
अपना एपीआई पासकोड चिपकाएं

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

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

डायरेक्ट्री को अपने work/ फ़ोल्डर में बदलें. कोडलैब के इस मॉड्यूल के बाकी बचे हिस्से में, work/ फ़ोल्डर में मौजूद वर्शन में बदलाव करें.

cd work

work/ डायरेक्ट्री में, अपने टेक्स्ट एडिटर का इस्तेमाल करके index.html नाम की एक खाली फ़ाइल बनाएं.
नीचे दिए गए कोड को 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>

अपने वेब ब्राउज़र में फ़ाइल index.html खोलें.

open index.html

2. मैप जोड़ना

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

इस स्क्रिप्ट कोड को वहां जोड़ें जहां आपको map div के बाद और क्लोज़ </body> टैग से पहले  दिखता है.

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. अपना एपीआई पासकोड चिपकाएं

 के बाद वाली लाइन में, स्क्रिप्ट सोर्स यूआरएल में मौजूद 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>

उस एचटीएमएल फ़ाइल को सेव करें जिस पर काम किया जा रहा है.

इसे आज़माएँ

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

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

इस प्रोजेक्ट का पूरा कोड, GitHub पर उपलब्ध है.

3. उपयोगकर्ता की जगह की जानकारी पाना

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

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

जियोलोकेशन क्या है?

जियोलोकेशन का मतलब, डेटा इकट्ठा करने के अलग-अलग तरीकों से, किसी उपयोगकर्ता या कंप्यूटिंग डिवाइस की भौगोलिक जगह की पहचान करना है. आम तौर पर, जगह की जानकारी देने वाली ज़्यादातर सेवाएं, इस जगह का पता लगाने के लिए नेटवर्क राउटिंग पतों या इंटरनल जीपीएस डिवाइसों का इस्तेमाल करती हैं. यह ऐप्लिकेशन, उपयोगकर्ता की जगह की जानकारी का पता लगाने के लिए, वेब ब्राउज़र के W3C Geolocation स्टैंडर्ड की 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 */

इसे आज़माएँ

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

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

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

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

Chrome में, पता बार में मौजूद यह पेज आपकी जगह की जानकारी ट्रैक कर रहा है पर क्लिक करें.

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

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

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

इस प्रोजेक्ट का पूरा कोड, GitHub पर उपलब्ध है.

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

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

LatLngBounds ऑब्जेक्ट, खोज के लिए आयताकार जगह तय करता है
यह एक गोलाकार क्षेत्र होता है. इसे location प्रॉपर्टी के कॉम्बिनेशन के तौर पर तय किया जाता है. यह प्रॉपर्टी, सर्कल के सेंटर को LatLng ऑब्जेक्ट के तौर पर तय करती है. साथ ही, इसमें मीटर में मेज़र किया गया रेडियस भी शामिल होता है

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

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

सबसे पहले, Places Library की सेवाओं को ऐक्सेस करने के लिए, अपने स्क्रिप्ट सोर्स यूआरएल को अपडेट करें. इससे libraries पैरामीटर को जोड़ा जा सकेगा और 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 ऑब्जेक्ट होता है और दूसरे वाले में एक सामान्य पूर्णांक होता है. यह पूर्णांक, सर्कल की त्रिज्या को मीटर में दिखाता है. ज़्यादा से ज़्यादा 50,000 मीटर के दायरे को टारगेट किया जा सकता है. ध्यान दें कि rankBy को DISTANCE पर सेट करने पर, आपको जगह की जानकारी देनी होगी. हालांकि, दायरा या सीमाएं तय नहीं की जा सकतीं.
एक keyword, जिसे सभी उपलब्ध फ़ील्ड से मैच किया जाता है. इनमें नाम, टाइप, पता, ग्राहक समीक्षाएं, और तीसरे पक्ष का अन्य कॉन्टेंट शामिल है. हालांकि, इनके अलावा और भी फ़ील्ड शामिल हो सकते हैं. या एक type, जो नतीजों को उस तरह की जगहों तक सीमित करता है जो तय किए गए टाइप से मेल खाती हैं. सिर्फ़ एक टाइप तय किया जा सकता है. अगर एक से ज़्यादा टाइप दिए जाते हैं, तो पहली एंट्री के बाद के सभी टाइप अनदेखा कर दिए जाते हैं. इस्तेमाल किए जा सकने वाले टाइप की सूची देखें.

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

खोज को कॉल करने और जवाब को मैनेज करने के लिए, टिप्पणी 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 */

इस लाइन को TODO: Step 3B2 टिप्पणी में initMap फ़ंक्शन के आखिर में जोड़ें.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

इस लाइन को 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 (ज़रूरी नहीं) यह उस मैप के बारे में बताता है जिस पर मार्कर को रखना है. अगर मार्कर बनाते समय मैप की जानकारी नहीं दी जाती है, तो मार्कर बन जाता है. हालांकि, यह मैप से अटैच नहीं होता है और न ही मैप पर दिखता है. मार्कर को बाद में जोड़ा जा सकता है. इसके लिए, मार्कर के 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 */

इसे आज़माएँ

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

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

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

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

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

इस प्रोजेक्ट का पूरा कोड, GitHub पर उपलब्ध है.

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

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

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

टिप्पणी 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;
}

map div से ठीक पहले मौजूद body सेक्शन में, जानकारी वाले पैनल के लिए एक div जोड़ें.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

TODO: Step 4A3 टिप्पणी के बाद, initMap() फ़ंक्शन में infoPane वैरिएबल को इस तरह से शुरू करें:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

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

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

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

यहां दिए गए कोड को, कोड कमेंट 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. जानकारी वाली विंडो में जगह की जानकारी दिखाना

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

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

साइडबार में जानकारी दिखाने के लिए, अगले सेक्शन में 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 */

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

टिप्पणी 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");
}

ई॰ जगह की फ़ोटो के साथ, जगह की जानकारी दिखाना

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

अगर आपको फ़ोटो को साइडबार में सबसे ऊपर दिखाना है, तो इस कोड को 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);
}

इसे आज़माएँ

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

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

इस प्रोजेक्ट का पूरा कोड, GitHub पर उपलब्ध है.

6. बधाई हो

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

हमने क्या-क्या कवर किया है

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

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

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

आपको किस तरह का कोडलैब चाहिए?

जगहों के बारे में ज़्यादा जानकारी का इस्तेमाल करने के अन्य उदाहरण

Maps Platform JavaScript API का इस्तेमाल करने वाले अन्य कोडलैब

Android के लिए अन्य कोडलैब

iOS के लिए अन्य कोडलैब

मैप पर जगह के हिसाब से डेटा को विज़ुअलाइज़ करना

मैप की स्टाइल को पसंद के मुताबिक बनाना

StreetView का इस्तेमाल करना

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

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

ज़रूरी शर्तें

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

आपको क्या करना होगा

आपको इन चीज़ों की ज़रूरत होगी

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

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

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

2. मैप जोड़ना

3. अपना एपीआई पासकोड चिपकाएं

इसे आज़माएँ

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

3. उपयोगकर्ता की जगह की जानकारी पाना

जियोलोकेशन क्या है?

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

इसे आज़माएँ

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

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

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

B. आस-पास की जगहों को खोजने के लिए अनुरोध करना और जवाब को मैनेज करना

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

इसे आज़माएँ

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

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

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

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

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

डी॰ साइडबार में जगह की जानकारी लोड करना

ई॰ जगह की फ़ोटो के साथ, जगह की जानकारी दिखाना

इसे आज़माएँ

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

6. बधाई हो

हमने क्या-क्या कवर किया है

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

आपको किस तरह का कोडलैब चाहिए?