1. शुरू करने से पहले
इस कोडलैब में, आपको वेब के लिए Google Maps Platform का इस्तेमाल शुरू करने से जुड़ी हर जानकारी मिलेगी. आपको सभी बुनियादी बातें सीखने को मिलेंगी. जैसे, सेटअप करना, Maps JavaScript API लोड करना, अपना पहला मैप दिखाना, मार्कर और मार्कर क्लस्टरिंग का इस्तेमाल करना, मैप पर ड्रॉइंग करना, और उपयोगकर्ता के इंटरैक्शन को मैनेज करना.
आपको क्या बनाना है
इस कोडलैब में, एक ऐसा वेब ऐप्लिकेशन बनाया जाता है जो ये काम करता है:
- Maps 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
- MarkerClustererPlus ओपन सोर्स मार्कर क्लस्टरिंग लाइब्रेरी
इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के लिए अन्य ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:
- बिलिंग की सुविधा वाला 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 का इस्तेमाल शुरू करने से जुड़ी प्लेलिस्ट देखें. इसके बाद, यहां दिया गया तरीका अपनाएं:
- बिलिंग खाता बनाएं.
- प्रोजेक्ट बनाएं.
- Google Maps Platform API और SDK टूल चालू करें. इनकी सूची पिछले सेक्शन में दी गई है.
- एपीआई पासकोड जनरेट करें.
3. सेट अप करना
Google Maps Platform सेट अप करना
अगर आपके पास Google Cloud Platform खाता और बिलिंग की सुविधा वाला प्रोजेक्ट नहीं है, तो बिलिंग की सुविधा वाला खाता और प्रोजेक्ट बनाएं. ऐसा करने का तरीका जानने के लिए, कृपया Google Maps Platform का इस्तेमाल शुरू करना देखें.
- Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है.
- इस कोडलैब के लिए ज़रूरी Google Maps Platform API और एसडीके को Google Cloud Marketplace में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं.
- Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.
Node.js सेटअप करना
अगर आपके पास पहले से यह नहीं है, तो अपने कंप्यूटर पर Node.js runtime को डाउनलोड और इंस्टॉल करने के लिए, https://nodejs.org/ पर जाएं.
Node.js में npm पैकेज मैनेजर होता है. इस कोडलैब के लिए, आपको डिपेंडेंसी इंस्टॉल करनी होंगी.
प्रोजेक्ट के स्टार्टर टेंप्लेट को सेटअप करना
इस कोडलैब को शुरू करने से पहले, स्टार्टर प्रोजेक्ट के टेंप्लेट और पूरे सलूशन कोड को डाउनलोड करने के लिए, यह तरीका अपनाएं:
- इस कोडलैब के लिए, 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 का इस्तेमाल करने के लिए, यह तरीका अपनाएं:
/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 का आपका एपीआई पासकोड, एपीआई का वह वर्शन जिसे आपको लोड करना है, और Maps JS API से मिली ऐसी कोई भी अतिरिक्त लाइब्रेरी जिसे आपको लोड करना है. इस कोडलैब के लिए, आपको सिर्फ़ एपीआई पासकोड देना होगा. इसके लिए,app.js
में यह जोड़ें:const apiOptions = { apiKey: "YOUR API KEY" }
Loader
का एक इंस्टेंस बनाएं और इसे अपनाapiOptions
पास करें.const loader = new Loader(apiOptions);
- Maps JS API लोड करें.
एपीआई लोड करने के लिए,Loader
इंस्टेंस परload()
को कॉल करें. JS API लोडर, एक प्रॉमिस दिखाता है. यह प्रॉमिस तब रिज़ॉल्व होता है, जब एपीआई लोड हो जाता है और इस्तेमाल के लिए तैयार होता है. एपीआई को लोड करने और प्रॉमिस को मैनेज करने के लिए, इस स्टब को जोड़ें:loader.load().then(() => { console.log('Maps JS API loaded'); });
अगर सब सही तरीके से हुआ है, तो आपको ब्राउज़र कंसोल में console.log
दिखना चाहिए. Chrome का इस्तेमाल करके, इस अतिरिक्त विंडो को व्यू -> डेवलपर -> Javascript कंसोल पर जाकर ऐक्सेस किया जा सकता है.
संक्षेप में, आपने अब कोड से 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()
नाम का नया फ़ंक्शन बनाकर देखें कि यह कैसे काम करता है.
- मैप सेटिंग तय करें.
Maps JavaScript API में मैप के लिए कई तरह की सेटिंग इस्तेमाल की जा सकती हैं. हालांकि, सिर्फ़ दो सेटिंग ज़रूरी हैं:center
: मैप के केंद्र के हिसाब से, अक्षांश और देशांतर सेट करता है.zoom
: इससे मैप के लिए ज़ूम करने का शुरुआती लेवल सेट किया जाता है.
function displayMap() { const mapOptions = { center: { lat: -33.860664, lng: 151.208138 }, zoom: 14 }; }
- उस
div
को पाएं जहां मैप को DOM में इंजेक्ट किया जाना चाहिए.
मैप दिखाने से पहले, आपको Maps JavaScript API को यह बताना होगा कि आपको पेज में मैप कहां दिखाना है.index.html
में जाकर देखें. आपको दिखेगा कि यहां पहले से ही एकdiv
मौजूद है, जो इस तरह दिखता है: Maps JavaScript API को यह बताने के लिए कि आपको मैप को इस जगह पर इंजेक्ट करना है,<div id="map"></div>
document.getElementById
का इस्तेमाल करके इसका DOM रेफ़रंस पाएं: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;
- मैप दिखाओ!
मैप इंस्टेंस बनाने के लिए, पूरा लॉजिक तय करने के बाद, आपको JS API के प्रॉमिस हैंडलर से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 JavaScript API का इस्तेमाल करते समय, डेवलपर कई काम करते हैं, लेकिन मैप पर मार्कर लगाना उनके अहम कामों में से एक है. मार्कर की मदद से, मैप पर खास जगहों को हाइलाइट किया जा सकता है. साथ ही, यह एक ऐसा यूज़र इंटरफ़ेस (यूआई) एलिमेंट है जिससे बहुत ज़्यादा उपयोगकर्ता इंटरैक्ट करते हैं. अगर आपने पहले Google Maps का इस्तेमाल किया है, तो आपको शायद डिफ़ॉल्ट मार्कर के बारे में पता होगा. यह इस तरह दिखता है:
इस चरण में, मैप पर मार्कर लगाने के लिए 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;
- मार्कर दिखाएं.
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); });
अब आपको मैप पर कस्टम मार्कर दिखेंगे:
संक्षेप में, इस चरण में आपने मार्कर की जगहों का एक सेट तय किया और हर जगह के लिए कस्टम मार्कर आइकॉन के साथ 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 पर MarkerClustererPlus का सोर्स देखा जा सकता है.
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 API के प्रॉमिस हैंडलर सेclusterMarkers()
को कॉल करें. फ़ंक्शन कॉल मेंMarkerClusterer
इंस्टेंस बनाए जाने पर, मार्कर क्लस्टर अपने-आप मैप में जुड़ जाते हैं.loader.then(() => { console.log('Maps JS API loaded'); const map = displayMap(); const markers = addMarkers(map); clusterMarkers(map, markers); });
अब आपको मैप पर कुछ मार्कर क्लस्टर दिखेंगे.
ध्यान दें कि ज़ूम इन या ज़ूम आउट करने पर, MarkerClustererPlus आपके लिए अपने-आप क्लस्टर को फिर से क्रम में लगाता है और उनका साइज़ भी बदलता है. ज़ूम इन करने के लिए, किसी भी मार्कर क्लस्टर आइकॉन पर क्लिक किया जा सकता है और उस क्लस्टर में शामिल सभी मार्कर देखे जा सकते हैं.
कम शब्दों में कहा जाए, तो इस चरण में आपने ओपन-सोर्स 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 इवेंट हैंडलर का इस्तेमाल करता है. उदाहरण के लिए, इंटरैक्शन के लिए कोड को ट्रिगर करना है, तो इवेंट लिसनर बनाए जा सकते हैं. जैसे- मैप और मार्कर पर क्लिक करने कर, मैप के व्यू को पैन करने पर, ज़ूम इन और आउट करने पर, और ऐसे ही अन्य इंटरैक्शन.
इस चरण में, आपको अपने मार्कर में एक क्लिक लिसनर जोड़ना होगा. इसके बाद, प्रोग्रामैटिक रूप से मैप को पैन करना होगा, ताकि उपयोगकर्ता ने जिस मार्कर पर क्लिक किया है उसे मैप के बीच में रखा जा सके.
- अपने मार्कर पर क्लिक लिसनर सेट करें.
Maps JavaScript API में मौजूद सभी ऑब्जेक्ट, इवेंट सिस्टम के साथ काम करते हैं. ये ऑब्जेक्ट, उपयोगकर्ता के इंटरैक्शन को मैनेज करने के लिए फ़ंक्शन का एक स्टैंडर्ड सेट लागू करते हैं. जैसे,addListener
,removeListener
वगैरह.
हर मार्कर में क्लिक इवेंट लिसनर जोड़ने के लिए,markers
ऐरे को दोहराएं. इसके बाद, मार्कर इंस्टेंस परaddListener
को कॉल करें, ताकिclick
इवेंट के लिए लिसनर अटैच किया जा सके: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 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 मीटर का सर्कल दिखाने लगता है.
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 API लोड करना, मैप लोड करना, मार्कर इस्तेमाल करना, मैप पर ड्रॉइंग करना, उसे कंट्रोल करना, और उपयोगकर्ता के इंटरैक्शन जोड़ना सीखा.
पूरा कोड देखने के लिए, /solutions
डायरेक्ट्री में जाकर पूरा किया गया प्रोजेक्ट देखें.
आगे क्या करना है?
इस कोडलैब में, आपने Maps JavaScript API का इस्तेमाल करके की जा सकने वाली बुनियादी कार्रवाइयों के बारे में जाना. इसके बाद, मैप में इनमें से कुछ सुविधाएं जोड़कर देखें:
- सैटलाइट, हाइब्रिड, और इलाके के मैप दिखाने के लिए, मैप टाइप बदलें.
- मैप को अलग-अलग भाषाओं में लोड करने के लिए, स्थानीय भाषा में अनुवाद करने की सुविधा चालू करें.
- ज़ूम और मैप कंट्रोल जैसे अन्य उपयोगकर्ता इंटरैक्शन को पसंद के मुताबिक बनाएं.
- मार्कर पर क्लिक करने पर जानकारी दिखाने के लिए, जानकारी वाली विंडो जोड़ें.
- Maps JavaScript API के लिए उपलब्ध अन्य लाइब्रेरी देखें. इनसे अतिरिक्त सुविधाएं मिलती हैं. जैसे, जगहों की जानकारी, ड्रॉइंग, और विज़ुअलाइज़ेशन.
वेब पर Google Maps Platform का इस्तेमाल करने के अन्य तरीकों के बारे में ज़्यादा जानने के लिए, इन लिंक पर जाएं: