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

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

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

आपको क्या बनाना है

e52623cb8578d625.png

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

  • Maps JavaScript API लोड करता है
  • ऑस्ट्रेलिया के सिडनी शहर के हिसाब से मैप दिखाता है
  • सिडनी की लोकप्रिय जगहों के लिए कस्टम मार्कर दिखाता है
  • मार्कर क्लस्टरिंग लागू करता है
  • इस कुकी से, उपयोगकर्ता को इंटरैक्ट करने की सुविधा मिलती है. जब किसी मार्कर पर क्लिक किया जाता है, तो मैप फिर से सेंटर हो जाता है और उस पर एक सर्कल बन जाता है

आपको क्या सीखने को मिलेगा

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

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

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

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

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

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

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

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

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

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

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

3. सेट अप करना

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

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

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

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

Node.js सेटअप करना

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

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

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

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

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

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

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

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

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

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

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

अगर आपने पहले Maps JavaScript API का इस्तेमाल किया है, तो आपको शायद इसे लोड करने के बारे में पता होगा. इसके लिए, आपको HTML फ़ाइल में इस तरह का script टैग डालना होगा:

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

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

JS API Loader का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

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

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

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

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

अगर सब सही तरीके से हुआ है, तो आपको ब्राउज़र कंसोल में console.log दिखना चाहिए. Chrome का इस्तेमाल करके, इस अतिरिक्त विंडो को व्यू -> डेवलपर -> Javascript कंसोल पर जाकर ऐक्सेस किया जा सकता है.

4fa88d1618cc7fd.png

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

आपकी app.js फ़ाइल कुछ ऐसी दिखनी चाहिए:

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

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

    const loader = new Loader(apiOptions);

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

Maps JavaScript API लोड हो चुका है. अब अगले चरण में, मैप लोड किया जाएगा.

5. मैप डिसप्ले करने का तरीका

अब बारी है अपना पहला मैप डिसप्ले करने की!

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

  1. मैप सेटिंग तय करें.

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

    मैप दिखाने से पहले, आपको Maps JavaScript API को यह बताना होगा कि आपको पेज में मैप कहां दिखाना है. index.html में जाकर देखें. आपको दिखेगा कि यहां पहले से ही एक div मौजूद है, जो इस तरह दिखता है:
     <div id="map"></div>
    
    Maps JavaScript API को यह बताने के लिए कि आपको मैप को इस जगह पर इंजेक्ट करना है, document.getElementById का इस्तेमाल करके इसका DOM रेफ़रंस पाएं:
     const mapDiv = document.getElementById('map');
    
  3. google.maps.Map का इंस्टेंस बनाएं.

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

    मैप इंस्टेंस बनाने के लिए, पूरा लॉजिक तय करने के बाद, आपको JS API के प्रॉमिस हैंडलर से displayMap() को कॉल करना होगा. इससे Maps JavaScript API लोड होने के बाद, इसे एक बार कॉल किया जा सकेगा:
     loader.then(() => {
       console.log('Maps JS API loaded');
       const map = displayMap();
     });
    

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

fb0cd6bc38532780.png

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

आपका 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. क्लाउड पर मैप की स्टाइलिंग (ज़रूरी नहीं)

क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके, अपने मैप में मनमुताबिक स्टाइल जोड़े जा सकते हैं.

मैप आईडी बनाना

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

  1. मैप आईडी बनाना.
  2. मैप के किसी स्टाइल से एक मैप आईडी जोड़ना.

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

आपने जो मैप आईडी बनाया है उसका इस्तेमाल करने के लिए, 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 JavaScript API का इस्तेमाल करते समय, डेवलपर कई काम करते हैं, लेकिन मैप पर मार्कर लगाना उनके अहम कामों में से एक है. मार्कर की मदद से, मैप पर खास जगहों को हाइलाइट किया जा सकता है. साथ ही, यह एक ऐसा यूज़र इंटरफ़ेस (यूआई) एलिमेंट है जिससे बहुत ज़्यादा उपयोगकर्ता इंटरैक्ट करते हैं. अगर आपने पहले Google Maps का इस्तेमाल किया है, तो आपको शायद डिफ़ॉल्ट मार्कर के बारे में पता होगा. यह इस तरह दिखता है:

590815267846f166.png

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

  1. मार्कर की जगहों के लिए कोई ऑब्जेक्ट तय करें.

    शुरू करने के लिए, एक नया 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 }
       }
     }
    
  2. आपको जितने मार्कर दिखाने हैं उनके लिए 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;
    
  3. मार्कर दिखाएं.

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

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

1e4a55de15215480.png

संक्षेप में, इस चरण में आपने मार्कर की जगहों का एक सेट तय किया और हर जगह के लिए कस्टम मार्कर आइकॉन के साथ 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. मार्कर क्लस्टरिंग की सुविधा चालू करना

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

6e39736160c6bce4.png

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

4f372caab95d7499.png

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

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

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

    लाइब्रेरी को इंपोर्ट करने के लिए, अपनी app.js फ़ाइल में सबसे ऊपर यह कोड जोड़ें:
     import MarkerClusterer from '@google/markerclustererplus';
    
  2. 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);
     }
    
  3. मार्कर क्लस्टर दिखाएं.

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

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

e52623cb8578d625.png

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

d572fa11aca13eeb.png

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

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

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

अब जानते हैं, उपयोगकर्ता के इंटरैक्शन को मैनेज करने का तरीका.

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

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

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

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

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

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

    हर मार्कर में क्लिक इवेंट लिसनर जोड़ने के लिए, markers ऐरे को दोहराएं. इसके बाद, मार्कर इंस्टेंस पर addListener को कॉल करें, ताकि click इवेंट के लिए लिसनर अटैच किया जा सके:
     function addPanToMarker(map, markers) {
       markers.map(marker => {
         marker.addListener('click', event => {
    
         });
       });
     }
    
  2. किसी मार्कर पर क्लिक करने पर, उसे पैन करें.

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

    अक्षांश और देशांतर मिल जाने पर, उसे Map इंस्टेंस के बिल्ट-इन panTo() फ़ंक्शन में पास करें. इससे मैप आराम से पैन होकर, क्लिक किए गए मार्कर पर रीसेंटर हो जाता है. इसके लिए, इवेंट हैंडलर के कॉलबैक फ़ंक्शन में नीचे दिया कोड जोड़ना होता है:
     const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
     map.panTo(location);
    
  3. क्लिक लिसनर असाइन करें.

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

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

कम शब्दों में समझें, तो इस चरण में आपने मैप पर मौजूद सभी मार्कर को क्लिक लिसनर असाइन करने के लिए, Maps 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 JavaScript API की ड्रॉइंग सुविधाओं का इस्तेमाल करके, मैप के उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका सिखाया जाएगा.

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

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

मान लें कि इस मैप को वे लोग इस्तेमाल करेंगे जो सिडनी घूमना चाहते हैं. ऐसे में, लोगों के काम की एक सुविधा यह हो सकती है कि उनके किसी मार्कर पर क्लिक करने पर, उसके चारों ओर एक सर्कल बन जाए. इससे उपयोगकर्ता को यह समझने में आसानी होगी कि क्लिक किए गए मार्कर से वे जगहें कितनी दूर हैं जहां पैदल जाया जा सकता है.

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

  1. 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;
     }
    
  2. मार्कर पर क्लिक करने पर सर्कल बनाएं.

    जब उपयोगकर्ता किसी मार्कर पर क्लिक करे, तब सर्कल बनाने के लिए आपको बस इतना करना है कि 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);
         });
       });
     }
    

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

254baef70c3ab4d5.png

11. बधाई हो

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

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

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

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

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