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

अपनी वेबसाइट में एक मैप जोड़ें (JavaScript)

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

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

आप क्या बनाएंगे #39;

इस कोडलैब में आप एक आसान वेब ऐप्लिकेशन बना सकते हैं, जो ये काम करेगा:

मैप JavaScript API लोड करता है
ऑस्ट्रेलिया के ऑस्ट्रेलिया वाले इलाके का मैप दिखाता है
सिडनी में लोकप्रिय आकर्षणों के लिए कस्टम मार्कर दिखाता है
मार्कर क्लस्टर लागू करता है
यह उपयोगकर्ता के इंटरैक्शन को चालू करता है जो हाल ही में सेंटर पर जाता है. साथ ही, मार्कर पर क्लिक करने पर मैप पर एक सर्कल बनाता है

आप इन चीज़ों के बारे में जानेंगे

Google Maps Platform का इस्तेमाल शुरू करना
JavaScript कोड से डाइनैमिक तौर पर Maps JavaScript API लोड हो रहा है
कोई मैप लोड कर रहा है
मार्कर, कस्टम मार्कर, और मार्कर क्लस्टर का इस्तेमाल करना
उपयोगकर्ता को इंटरैक्शन उपलब्ध कराने के लिए, Maps JavaScript API इवेंट सिस्टम पर काम करना
मैप को डाइनैमिक तौर पर कंट्रोल करना
मैप पर ड्रॉइंग बनाना

2. ज़रूरी बातें

इस कोडलैब को पूरा करने के लिए, आपको नीचे दिए गए आइटम के बारे में जानना होगा. अगर आप पहले से ही Google Maps Platform के साथ काम करने के बारे में जानते हैं, तो कोडलैब का इस्तेमाल करें!

Google Maps Platform के लिए ज़रूरी प्रॉडक्ट

इस कोडलैब में आप इन Google Maps Platform प्रॉडक्ट का इस्तेमाल करेंगे:

Maps JavaScript API
मार्करक्लस्टर प्लस ओपन सोर्स मार्कर क्लस्टरिंग लाइब्रेरी

इस कोडलैब के लिए अन्य ज़रूरी शर्तें

इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:

बिलिंग की सुविधा वाला Google Cloud Platform खाता
चालू की गई Google Maps Platform API कुंजी, जिसमें Maps JavaScript API चालू है
JavaScript, एचटीएमएल, और सीएसएस के बारे में बुनियादी जानकारी
आपके कंप्यूटर पर Node.js इंस्टॉल किया गया
आपकी पसंद का टेक्स्ट एडिटर या आईडीई

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

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

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

3. सेट अप करें

Google Maps Platform सेट अप करना

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

Cloud Console में, प्रोजेक्ट ड्रॉप-डाउन मेन्यू पर क्लिक करें और वह प्रोजेक्ट चुनें जिसे आप इस कोडलैब के लिए इस्तेमाल करना चाहते हैं.

Google Cloud Marketplace में, इस कोडलैब के लिए ज़रूरी Google Maps Platform API और SDK टूल चालू करें. ऐसा करने के लिए, इस वीडियो या इस दस्तावेज़ में दिया गया तरीका अपनाएं.
Cloud Console के क्रेडेंशियल पेज में एपीआई कुंजी जनरेट करें. आप इस वीडियो या इस दस्तावेज़ में दिया गया तरीका अपना सकते हैं. Google Maps Platform पर सभी अनुरोधों के लिए एपीआई कुंजी ज़रूरी है.

Node.js का सेट अप

अगर आपके पास यह पहले से नहीं है, तो अपने कंप्यूटर पर Node.js रनटाइम डाउनलोड और इंस्टॉल करने के लिए https://nodejs.org/ पर जाएं.

Node.js, npm पैकेज मैनेजर के साथ आता है. आपको इस कोडलैब के लिए डिपेंडेंसी इंस्टॉल करनी होगी.

प्रोजेक्ट स्टार्टर टेंप्लेट सेट अप

इस कोडलैब का इस्तेमाल शुरू करने से पहले, स्टार्टर प्रोजेक्ट टेंप्लेट डाउनलोड करने के लिए, यह तरीका अपनाएं. साथ ही, पूरा सॉल्यूशन कोड भी डाउनलोड करें:

https://github.com/googlecodelabs/maps-platform-101-js पर इस कोडलैब के लिए GitHub repo डाउनलोड करें या फ़ोर्क करें.

स्टार्टर प्रोजेक्ट, /starter डायरेक्ट्री में मौजूद है. इसमें कोडलैब को पूरा करने के लिए ज़रूरी बुनियादी फ़ाइल स्ट्रक्चर शामिल है. आपको जिस भी चीज़ के साथ काम करना है वह /starter/src निर्देशिका में मौजूद है. 2. स्टार्टर प्रोजेक्ट डाउनलोड करने के बाद, /starter डायरेक्ट्री में npm install चलाएं. यह package.json में दी गई सभी ज़रूरी डिपेंडेंसी इंस्टॉल कर देता है. 3. डिपेंडेंसी इंस्टॉल होने के बाद, डायरेक्ट्री में npm start चलाएं.

स्टार्टर प्रोजेक्ट को आपके लिए Webpack-dev-server

अगर आप पूरा समाधान कोड देखना चाहते हैं, तो आप ऊपर दी गई /solution डायरेक्ट्री में सेट अप पूरा कर सकते हैं.

4. Maps JavaScript API लोड करना

शुरू करने से पहले, कृपया सेट अप शुरू करना में बताए गए तरीकों का पालन करें. सब हो गया? ठीक है, Google Maps Platform का इस्तेमाल करके, अपना पहला वेब ऐप्लिकेशन बनाने का समय आ गया है!

वेब के लिए Google Maps Platform का इस्तेमाल करने का आधार, Maps JavaScript API है. यह API, Google मैप प्लैटफ़ॉर्म की सभी सुविधाओं का इस्तेमाल करने के लिए एक JavaScript इंटरफ़ेस देता है. इसमें मैप, मार्कर, ड्रॉइंग टूल, और 'जगहें' जैसी Google Maps Platform की अन्य सेवाएं शामिल हैं.

अगर आपको Maps JavaScript API के साथ पहले का अनुभव है, तो आप script टैग को इस तरह की एचटीएमएल फ़ाइल में डालकर, लोड कर सकते हैं:

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

यह अब भी एपीआई लोड करने का पूरी तरह से मान्य तरीका है, लेकिन आधुनिक JavaScript डिपेंडेंसी में आम तौर पर कोड से डाइनैमिक तौर पर शामिल किए जाते हैं. कोड से ऊपर दिए गए script टैग के बराबर काम करने के लिए, आप@googlemaps/js-api-loader मॉड्यूल का इस्तेमाल करेंगे. JS एपीआई लोडर पहले से ही प्रोजेक्ट's package.json फ़ाइल की निर्भरता में शामिल है. इसलिए, आपने इससे पहले npm install चलाया था.

JS एपीआई लोडर का इस्तेमाल करने के लिए, ये करें:

/src/app.js खोलें. इस फ़ाइल में, इस कोडलैब के लिए आपको सभी काम करने होंगे.
@googlemaps/js-api-loader से Loader क्लास को इंपोर्ट करें.

इन्हें app.js के सबसे ऊपर जोड़ें:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
apiOptions ऑब्जेक्ट बनाएं.

Loader क्लास के लिए, ऐसा JSON ऑब्जेक्ट ज़रूरी है जो Maps JavaScript API को लोड करने के लिए, कई विकल्प बताता है. इनमें Google Maps Platform API कुंजी, एपीआई का कौनसा वर्शन लोड करना है, और Maps की JS एपीआई की उपलब्ध कराई गई अन्य लाइब्रेरी शामिल हैं. इस कोडलैब के लिए, आपको सिर्फ़ app.js में
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
को जोड़कर एपीआई कुंजी तय करनी होगी
Loader का एक इंस्टेंस बनाएं और उसे अपने apiOptions में पास करें.
```
 const loader = new Loader(apiOptions);
```
Maps JS एपीआई लोड करें.

एपीआई लोड करने के लिए, load() को Loader इंस्टेंस पर कॉल करें. JS एपीआई लोडर एक ऐसा वादा लौटाता है जो एपीआई लोड होने और इस्तेमाल के लिए तैयार होने के बाद ठीक हो जाता है. एपीआई को लोड करने और वादे को हैंडल करने के लिए, नीचे दिए गए स्टब को जोड़ें:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

अगर सब कुछ सफल होता है, तो आपको ब्राउज़र कंसोल में console.log स्टेटमेंट दिखेगा:

Recap

आपकी app.js फ़ाइल कुछ ऐसी दिखेगी:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

मैप JavaScript API के लोड होने के बाद, आप अगले # चरण में मैप को लोड करेंगे.

5. एक मैप दिखाएं

अपना पहला मैप दिखाने का समय हो गया है!

Maps JavaScript API का सबसे ज़्यादा इस्तेमाल किया जाने वाला हिस्सा google.maps.Map है, जो ऐसी क्लास है जो हमें मैप के इंस्टेंस बनाने और उनमें बदलाव करने की अनुमति देती है. displayMap() नाम का एक नया फ़ंक्शन बनाकर देखें कि यह कैसे काम करता है.

अपनी मैप सेटिंग तय करें.

Maps JavaScript API, मैप के लिए कई अलग-अलग सेटिंग के साथ काम करता है, लेकिन सिर्फ़ दो सेटिंग ज़रूरी हैं:
- center: मैप के केंद्र के लिए अक्षांश और देशांतर सेट करता है.
- zoom: यह मैप का शुरुआती ज़ूम लेवल सेट करता है.
नीचे दिए गए कोड का इस्तेमाल करके, सिडनी और ऑस्ट्रेलिया के मैप को मैप करें. इसके बाद, शहर का केंद्र दिखाने के लिए, ज़ूम लेवल को 14 डिग्री पर सेट करें. यह सिर्फ़ ज़ूम लेवल के बारे में बताता है.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
div पाएं, जहां मैप को डीओएम में इंजेक्ट किया जाना चाहिए.

मैप दिखाने के पहले, आपको Maps JavaScript API को यह बताना होगा कि पेज में आप इसे कहां दिखाना चाहते हैं. अगर आप index.html में झटपट कुछ देखते हैं, तो आपको पता चलता है कि यहां पहले से ही div कुछ ऐसा दिखता है:
```
 <div id="map"></div>
```
Maps JavaScript एपीआई को यह बताने के लिए कि आपको मैप कहां देना है, document.getElementById का इस्तेमाल करके उसके डीओएम रेफ़रंस पाएं:
```
 const mapDiv = document.getElementById('map');
```
google.maps.Map का इंस्टेंस बनाएं.

Maps JavaScript API से एक नया मैप बनाने के लिए, जिसे दिखाया जा सकता है, google.maps.Map का इंस्टेंस बनाएं और mapDiv और mapOptions को पास करें. आप इस फ़ंक्शन से Map इंस्टेंस भी दिखाते हैं, ताकि आप इसे बाद में कर सकें:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
मैप दिखाएं!

जब आप अपने मैप इंस्टेंस बनाने के लिए सभी तर्क तय कर लेते हैं, तो जो भी #&3 कोड होता है, उसे JS एपीआई प्रॉमिस हैंडलर से displayMap() पर कॉल करना होता है. ऐसा इसलिए, ताकि Maps JavaScript API के लोड हो जाने पर उसे कॉल किया जा सके:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

अब आपको अपने ब्राउज़र में सिडनी का सुंदर मैप दिखाई देगा:

रीकैप, आप इस चरण में मैप के लिए डिसप्ले विकल्प तय करते हैं, नया मैप इंस्टेंस बनाते हैं, और डीओएम में इंजेक्ट करते हैं.

आपका displayMap() फ़ंक्शन कुछ ऐसा दिखना चाहिए:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. क्लाउड-आधारित मैप स्टाइलिंग (ज़रूरी नहीं)

क्लाउड पर आधारित मैप स्टाइल का इस्तेमाल करके आप अपने मैप की शैली को पसंद के मुताबिक बना सकते हैं.

एक मैप आईडी बनाएं

अगर आपने अभी तक मैप शैली के साथ कोई मैप आईडी नहीं बनाया है, तो नीचे दिए गए चरणों को पूरा करने के लिए मैप आईडी गाइड देखें:

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

अपने ऐप्लिकेशन में मैप आईडी जोड़ना

आपने जो मैप आईडी बनाया है उसका इस्तेमाल करने के लिए, app.js फ़ाइल में displayMap फ़ंक्शन में बदलाव करें और mapOptions ऑब्जेक्ट की mapId प्रॉपर्टी में अपना मैप आईडी पास करें.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

जब आप इसे पूरा कर लेते हैं, तो अब आप मैप पर अपनी चुनी हुई शैली देख सकते हैं!

7. मैप में मार्कर जोड़ें

Maps Maps API के साथ डेवलपर कई काम करते हैं, लेकिन मैप पर मार्कर लगाना सबसे लोकप्रिय है. मार्कर आपको मैप पर विशिष्ट बिंदु दिखाने देते हैं और उपयोगकर्ता इंटरैक्शन को प्रबंधित करने के लिए एक सामान्य UI तत्व हैं. अगर आपने पहले Google Maps का इस्तेमाल #39;किया है, तो शायद आप डिफ़ॉल्ट मार्कर के बारे में जानते होंगे. यह ऐसा दिखता है:

इस चरण में, आप google.maps.Marker का इस्तेमाल मैप पर मार्कर लगाने के लिए करेंगे.

अपने मार्कर स्थानों के लिए एक ऑब्जेक्ट परिभाषित करें.

शुरू करने के लिए, addMarkers() फ़ंक्शन बनाएं और locations ऑब्जेक्ट का एलान करें. यह ऑब्जेक्ट, सिडनी में पर्यटकों के बीच लोकप्रिय जगहों के लिए अक्षांश/देशांतर पॉइंट की जानकारी देता है.

साथ ही, यह भी ध्यान रखें कि आपको अपने Map इंस्टेंस को फ़ंक्शन में पास करना होगा. जब आप अपने मार्कर इंस्टेंस बनाएंगे, तो आप इसे बाद में इस्तेमाल करेंगे
```
 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }
```
.
हर उस मार्कर के लिए google.maps.Marker का एक इंस्टेंस बनाएं जिसे आप दिखाना चाहते हैं.

अपने मार्कर बनाने के लिए, for...in लूप का इस्तेमाल करके locations ऑब्जेक्ट से दोहराने के लिए नीचे दिए गए कोड का इस्तेमाल करें. हर मार्कर को रेंडर करने के तरीके के विकल्पों का सेट बनाएं. इसके बाद, हर जगह के लिए google.maps.Marker का एक इंस्टेंस बनाएं.

markerOptions की icon प्रॉपर्टी देखें. क्या आपको पहले का डिफ़ॉल्ट मैप पिन याद है? क्या आप जानते हैं कि आप पिन को अपनी पसंद की किसी भी इमेज के तौर पर पसंद के मुताबिक बना सकते हैं? ठीक है, आप ऐसा कर सकते हैं!

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

यह भी ध्यान रखें कि आपको अपने मार्कर इंस्टेंस को किसी अरे में सेव करना होगा और उन्हें फ़ंक्शन से लौटाना होगा, ताकि बाद में उनका इस्तेमाल किया जा सके.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
मार्कर दिखाएं.

जब भी google.maps.Marker का कोई नया इंस्टेंस बनता है, तब Maps JavaScript API अपने-आप एक मार्कर बनाता है और दिखाता है. इसलिए, अब आपको सिर्फ़ अपने JS एपीआई प्रॉमिस हैंडलर को अपडेट करके, addMarkers() को कॉल करना है और उसे अपने Map इंस्टेंस को पास करना है:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

अब आपको मैप पर कस्टम मार्कर दिखेंगे:

संक्षिप्त करने के लिए, इस चरण में आपने मार्कर स्थानों का एक सेट परिभाषित किया और हर स्थान के लिए एक कस्टम मार्कर आइकॉन के साथ एक google.maps.Marker बनाया.

आपका addMarkers() फ़ंक्शन कुछ ऐसा दिखना चाहिए:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

अगले चरण में, आप देखेंगे कि मार्कर क्लस्टर का इस्तेमाल करके मार्कर के उपयोगकर्ता अनुभव को कैसे बेहतर बनाते हैं.

8. मार्कर क्लस्टर चालू करना

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

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

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

MarkerCluster इंपोर्ट करें.

इस कोडलैब के लिए टेंप्लेट प्रोजेक्ट के लिए, MarkerClustererPlus यूटिलिटी लाइब्रेरी पहले से ही package.json फ़ाइल में तय डिपेंडेंसी में शामिल होती है. इसलिए, जब आपने कोडलैब की शुरुआत में npm install चलाया था, तब यह लाइब्रेरी पहले से इंस्टॉल हो चुकी थी.

लाइब्रेरी इंपोर्ट करने के लिए, अपनी app.js फ़ाइल में सबसे ऊपर यह जोड़ें:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
MarkerClusterer का एक नया इंस्टेंस बनाएं.

मार्कर क्लस्टर बनाने के लिए, आपको दो काम करने होंगे: वे आइकॉन दें जिनका इस्तेमाल आप अपने मार्कर क्लस्टर के लिए करना चाहते हैं और MarkerClusterer का एक नया इंस्टेंस बनाएं.

सबसे पहले, एक ऑब्जेक्ट के बारे में बताएं जो उन आइकॉन के पाथ की जानकारी देता है जिनका आप इस्तेमाल करना चाहते हैं. टेंप्लेट प्रोजेक्ट में ./img/m में पहले से ही इमेज का एक सेट सेव किया गया है. ध्यान दें कि इमेज फ़ाइल नामों को, एक ही प्रीफ़िक्स के साथ क्रम से नंबर दिया गया है: m1.png, m2.png, m3.png वगैरह.

जब आप मार्कर क्लस्टर में, imagePath प्रॉपर्टी सेट करते हैं, तो आपको पाथ और फ़ाइल प्रीफ़िक्स की जानकारी देनी होती है. साथ ही, मार्कर क्लस्टरर उस प्रीफ़िक्स वाली सभी फ़ाइलों का अपने-आप इस्तेमाल करता है और आखिर में एक नंबर जोड़ता है.

इसके बाद, MarkerClusterer का एक नया इंस्टेंस बनाएं और Map के इस इंस्टेंस को पास करें. यहां आप मार्कर क्लस्टर दिखाना चाहते हैं. साथ ही, Marker इंस्टेंस की एक ऐसी कैटगरी बनाना चाहते हैं जिसमें आप क्लस्टर दिखाना चाहते हैं.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
मार्कर क्लस्टर दिखाएं. JS एपीआई प्रॉमिस हैंडलर से

कॉल करेंclusterMarkers(). जब फ़ंक्शन कॉल में MarkerClusterer इंस्टेंस बनाया जाता है, तो मार्कर क्लस्टर अपने-आप मैप में जुड़ जाते हैं.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

अब आपको अपने मैप पर कुछ मार्कर क्लस्टर दिखेंगे.

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

संक्षिप्त करने के लिए, इस चरण में आपने ओपन-सोर्स MarkerClustererPlus यूटिलिटी लाइब्रेरी इंपोर्ट की और इसका इस्तेमाल MarkerClusterer का एक इंस्टेंस बनाने के लिए किया, जिससे पिछले चरण में बनाए गए मार्कर अपने-आप क्लस्टर में आ गए.

आपका clusterMarkers() फ़ंक्शन कुछ ऐसा दिखना चाहिए:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

इसके बाद, आप उपयोगकर्ता इंटरैक्शन को प्रबंधित करने का तरीका जानेंगे.

9. उपयोगकर्ता इंटरैक्शन जोड़ें

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

Maps JavaScript API, बेहतर इवेंट सिस्टम उपलब्ध कराता है. यह कोड इवेंट में उपयोगकर्ता के अलग-अलग इंटरैक्शन को मैनेज करने के लिए, JavaScript इवेंट हैंडलर का इस्तेमाल करता है. उदाहरण के लिए, आप इवेंट लिसनर बनाकर, यूज़र इंटरैक्शन को ट्रिगर कर सकते हैं. जैसे, उपयोगकर्ता, मैप और मार्कर पर क्लिक करके, मैप के व्यू को पैन करके, ज़ूम इन और ज़ूम आउट करके कई और काम कर सकता है.

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

अपने मार्कर पर क्लिक लिसनर सेट करें.

Maps JavaScript एपीआई में मौजूद सभी ऑब्जेक्ट जो इवेंट सिस्टम के साथ काम करते हैं, वे उपयोगकर्ता इंटरैक्शन (जैसे कि addListener, removeListener वगैरह) को मैनेज करने के लिए, फ़ंक्शन का एक स्टैंडर्ड सेट लागू करते हैं.

हर मार्कर के लिए क्लिक इवेंट लिसनर जोड़ने के लिए, markers अरे को दोहराएं और click इवेंट के लिए लिसनर अटैच करने के लिए, मार्कर इंस्टेंस पर addListener को कॉल करें:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
मार्कर पर क्लिक करने पर उसे पैन करें.

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

ऐसा करने के बाद, आपको Map इंस्टेंस'पहले से मौजूद panTo() फ़ंक्शन को पास करना होगा. इससे, इवेंट हैंडलर के कॉलबैक फ़ंक्शन में, नीचे दिए गए मार्कर को जोड़कर, क्लिक किए गए मार्कर पर फिर से हाल में नेविगेट किया जा सकेगा:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```
क्लिक लिसनर असाइन करें. JS एपीआई प्रॉमिस हैंडलर से

addPanToMarker() पर कॉल करें और कोड लागू करने और क्लिक लिसनर असाइन करने के लिए, अपने मैप और मार्कर को पास करें.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });
```

अब ब्राउज़र पर जाएं और अपने मार्कर पर क्लिक करें. मार्कर को क्लिक करने पर, आपको मैप को अपने-आप फिर से फ़ोकस करने के लिए दिखेगा.

संक्षिप्त करने के लिए, इस कदम में आपने मैप JavaScript API के इवेंट सिस्टम का इस्तेमाल किया, ताकि मैप पर सभी मार्कर को एक क्लिक लिसनर असाइन किया जा सके, सक्रिय किए गए क्लिक इवेंट से मार्कर के अक्षांश और देशांतर का पता लगाया जा सके और जब भी कोई मार्कर क्लिक किया जाए, तब मैप का हाल ही का इस्तेमाल किया जा सके.

आपका addPanToMarker() फ़ंक्शन कुछ ऐसा दिखना चाहिए:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

आपको बस एक और चरण पूरा करना है! इसके बाद, Maps Maps API की ड्रॉइंग की सुविधा का इस्तेमाल करके, उपयोगकर्ता के अनुभव को बेहतर बनाया जा सकता है.

10. मैप पर जानकारी देने के लिए ड्रॉ करें

अब तक आपने{2/} इस कोडलैब के आखिरी चरण में, आप मैप की ड्रॉइंग की सुविधाओं का इस्तेमाल करके, Maps JavaScript API का इस्तेमाल करके, अपने मैप में ज़्यादा उपयोगी सुविधाएं जोड़ पाएंगे.

मान लें कि इस मैप का इस्तेमाल उन उपयोगकर्ताओं के पास किया जाएगा जो सिडनी शहर को एक्सप्लोर करना चाहते हैं. मार्कर को क्लिक करने पर उसके आस-पास का दायरा विज़ुअलाइज़ करना एक उपयोगी सुविधा होगी. इसकी मदद से उपयोगकर्ता आसानी से समझ सकते हैं कि क्लिक किए गए मार्कर से पैदल आसानी से कौन-कौनसी मंज़िलें भेजी जा सकती हैं.

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

google.maps.Circle के साथ एक गोला बनाएं.

Maps JavaScript API में मौजूद, ड्रॉइंग की सुविधा से आपको कई तरह के विकल्प मिलते हैं. इनसे आप यह जान सकते हैं कि मैप पर बनाया गया ऑब्जेक्ट कैसा दिखता है. किसी गोलाकार त्रिज्या को रेंडर करने के लिए, सर्कल के विकल्पों का सेट बताएं, जैसे कि रंग, स्ट्रोक का वज़न, जहां सर्कल को बीच में किया जाना चाहिए और उसका दायरा, फिर एक नया सर्कल बनाने के लिए google.maps.Circle का नया इंस्टेंस बनाएं:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
मार्कर पर क्लिक किए जाने पर सर्कल बनाएं.

जब उपयोगकर्ता किसी मार्कर पर क्लिक करता है, तब सर्कल को बनाने के लिए, आपको बस addPanToMarker() में क्लिक लिसनर कॉलबैक से ऊपर लिखे drawCircle() फ़ंक्शन को कॉल करना होगा और उसे मार्कर और मैप की जगह पास करना होगा.

ध्यान दें कि circle.setMap(null) को कॉल करने वाला, कंडीशनल स्टेटमेंट कैसे जोड़ा जाता है. अगर उपयोगकर्ता किसी अन्य मार्कर पर क्लिक करता है, तो उसे मैप से पहले रेंडर किया गया सर्कल हटा दिया जाता है. ऐसा इसलिए किया जाता है, ताकि आपका यूआरएल एक्सप्लोर करने पर उपयोगकर्ता, सर्कल में शामिल मैप पर खत्म न हो.

आपका addPanToMarker() फ़ंक्शन कुछ ऐसा दिखना चाहिए:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

सब हो गया! अपने ब्राउज़र पर जाएं और किसी एक मार्कर पर क्लिक करें. आपको इसके चारों ओर एक गोलाकार त्रिज्या दिखेगी:

11. बधाई हो

आपने पहला वेब ऐप्लिकेशन बना लिया है. इसके लिए, Google Maps Platform का इस्तेमाल किया गया है. इसमें Maps का JavaScript एपीआई लोड करना, मैप को लोड करना, मार्कर की मदद से काम करना, मैप पर ड्रॉइंग और ड्रॉइंग करना, और उपयोगकर्ता के इंटरैक्शन जोड़ना शामिल है.

पूरा हो चुका कोड देखने के लिए, /solutions डायरेक्ट्री में तैयार किया गया प्रोजेक्ट देखें.

आगे क्या करना है?

इस कोडलैब में, आपने Maps की JavaScript एपीआई से जुड़ी बुनियादी बातों को शामिल किया है. इसके बाद, मैप में इनमें से कुछ सुविधाएं जोड़ने की कोशिश करें:

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

वेब पर Google Maps Platform के साथ काम करने के ज़्यादा तरीकों के बारे में जानने के लिए, ये लिंक देखें: