Google मैप्स जावास्क्रिप्ट एपीआई ट्यूटोरियल: अपनी वेबसाइट पर एक कस्टम मानचित्र जोड़ें

Google मैप्स जावास्क्रिप्ट एपीआई ट्यूटोरियल: अपनी वेबसाइट पर एक कस्टम मानचित्र जोड़ें

Google मैप्स जावास्क्रिप्ट एपीआई ट्यूटोरियल: अपनी वेबसाइट पर एक कस्टम मानचित्र जोड़ें
СОДЕРЖАНИЕ
02 июня 2020

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


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

जब आप अपनी वेबसाइट पर कुछ व्यावसायिक स्थान प्रदर्शित करना चाहते हैं, तो बेशक, दोनों ही बेहतरीन विकल्प हैं। लेकिन Google मैप्स जावास्क्रिप्ट एपीआई आपको ऐसे समय के लिए अधिक नियंत्रण प्रदान करता है जब आप एक पूर्व निर्मित प्लग की तुलना में अधिक जटिलता के साथ एक कस्टम मानचित्र बनाना चाहते हैं।.

गूगल मैप्स जावास्क्रिप्ट एपीआई ट्यूटोरियल

यदि आप कोडिंग पर समय नहीं बिताना चाहते हैं और अपनी वेबसाइट पर नक्शे प्रदर्शित करने के लिए अधिक सरल तरीका चाहते हैं, तो मैं सुझाव देता हूं ओटर से गूगल मैप्स ब्लॉक.

Google मैप्स जावास्क्रिप्ट एपीआई कुंजी प्राप्त करना

शुरू करने से पहले, हमें सबसे पहले Google मानचित्र के लिए एक एपीआई कुंजी प्राप्त करनी होगी। आप इससे प्राप्त कर सकते हैं यहाँ. Google मैप्स एपीआई पूरी तरह से मुक्त नहीं है, लेकिन यह एक मुफ्त योजना के साथ आता है जो अधिकांश मामलों के लिए पर्याप्त है.

एपीआई कुंजी मिल गई? राउंडअबाउट से तीसरा बाहर निकलें और ट्यूटोरियल के साथ जारी रखें। ��

एक सरल मानचित्र बनाना

डिफ़ॉल्ट सेटिंग्स के साथ एक मूल Google मैप्स उदाहरण।डिफ़ॉल्ट सेटिंग्स के साथ एक मूल Google मैप्स उदाहरण.

आरंभ करने के लिए सबसे पहले, एक सरल Google मानचित्र बनाएँ। जब आप अपने जावास्क्रिप्ट और सीएसएस को अलग कर सकते हैं, तो हम इस ट्यूटोरियल में एकल HTML फाइल का उपयोग कर रहे हैं। यहां वह संरचना है जिसका हम उपयोग करने जा रहे हैं:

एचटीएमएल>
<एचटीएमएल>
<सिर>
<शीर्षक>सरल मैप्टिटेल>
<मेटा नाम ="व्यूपोर्ट" सामग्री ="प्रारंभिक-पैमाना = 1.0">
<meta charset ="utf-8">
<अंदाज>
#नक्शा {
ऊंचाई: 100%;
}

html, शरीर {
ऊंचाई: 100%;
मार्जिन: 0;
गद्दी: 0;
}
अंदाज>
सिर>
<तन>
<div id ="नक्शा">div>
<लिपि>
नक्शा दो;
समारोह initMap () {
map = new google.maps.Map (document.getElementById (‘मैप’), {
केंद्र: {
lat: 51.513329,
lng: -0.088950
},
ज़ूम: 14
});
}
लिपि>
<स्क्रिप्ट src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&कॉलबैक = initMap" async defer>लिपि>
तन>
एचटीएमएल>

Google मैप्स API लोड होने के बाद, यह मैप को इनिशियलाइज़ करने वाले initMap फ़ंक्शन को कॉल करता है। यदि हम आगे भी अपना कोड तोड़ते हैं, तो हम खाली आईडी का उपयोग करके मानचित्र की एक आईडी के साथ घोषणा करते हैं कि हम मानचित्र को कहां प्रस्तुत करना चाहते हैं.

नक्शा दो;
समारोह initMap () {
map = new google.maps.Map (document.getElementById (‘मैप’), {
केंद्र: {
lat: 51.513329,
lng: -0.088950
},
ज़ूम: 14
});
}

हमारे जावास्क्रिप्ट में, सबसे पहले, हम फंक्शन के बाहर एक मैप वेरिएबल सेट करते हैं, इसलिए यह ग्लोबल स्कोप का हिस्सा है ताकि हम बाद में मैप को संशोधित कर सकें। हमारे initMap फ़ंक्शन में, हम पहले नए Google मानचित्र की घोषणा करते हैं और इसे तत्व को मानचित्र की आईडी के साथ कॉल करके प्रस्तुत करते हैं। उसके बाद, हम अपने विकल्पों को निर्दिष्ट करते हैं, जो मानचित्र का केंद्र और ज़ूम का स्तर हैं.

हम लंदन शहर के निर्देशांक का उपयोग करते हैं, लंदन के मध्य में एक ऐतिहासिक स्थल, मानचित्र केंद्र के रूप में। बाद में, हम चर्चा करते हैं कि आप मानचित्र पर किसी भी स्थान के निर्देशांक खोजने के लिए मैप्स एपीआई का उपयोग कैसे कर सकते हैं। लेकिन अभी के लिए, यदि आप उत्सुक हैं, तो आप उपयोग कर सकते हैं latlong.net किसी भी पते के निर्देशांक जल्दी से खोजने के लिए.

मानचित्र प्रकार

अब जब हमारे पास एक बुनियादी नक्शा है, तो हम उन अनुकूलन विकल्पों को देख सकते हैं जो Google मैप्स जावास्क्रिप्ट एपीआई हमें देता है। पहला विकल्प जो हम उपयोग करने जा रहे हैं वह है नक्शा प्रकार. Google मानचित्र चार प्रकार के मानचित्रों का समर्थन करता है, जो हैं:

  • रोडमैप: डिफ़ॉल्ट मानचित्र जिसे आप आमतौर पर देखते हैं.
  • उपग्रह: Google मानचित्र और Google धरती का उपग्रह दृश्य, जब उपलब्ध हो.
  • हाइब्रिड: रोडमैप और उपग्रह दृश्य का मिश्रण.
  • भूभाग: भू-भाग की जानकारी के आधार पर एक नक्शा, जैसे कि पहाड़ और घाटियाँ.

हमारे मानचित्र विकल्पों में, हम इस तरह से देखने के लिए एक मैप टाइप प्रॉपर्टी जोड़ सकते हैं, जिसे हम चाहते हैं:

map = new google.maps.Map (document.getElementById (‘मैप’), {
केंद्र: {
lat: 51.513329,
lng: -0.08895
},
ज़ूम: 14,
mapTypeId: ‘हाइब्रिड’
});

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

मानचित्र विकल्प

मानचित्र प्रकार के बाद, हम आते हैं नक्शा नियंत्रित करता है. Google मानचित्र आपको अपने छह नियंत्रणों में से किसी का भी उपयोग करने की अनुमति देता है। आप नियंत्रणों की एक सूची पा सकते हैं उनकी वेबसाइट पर.

यदि आवश्यक हो, तो आप उस नियंत्रण को निर्दिष्ट कर सकते हैं जिसका आप उपयोग करना चाहते हैं और उसका स्थान।

map = new google.maps.Map (document.getElementById (‘मैप’), {
केंद्र: {
lat: 51.513329,
lng: -0.08895
},
ज़ूम: 14,
mapTypeId: ‘हाइब्रिड’,
scaleControl: सच है,
फुलस्क्रीनकंट्रोल ऑक्शन्स: {
स्थिति: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

हम स्केलकंट्रोल को सक्षम करते हैं, जो मानचित्र के पैमाने को Google के कॉपीराइट के साथ-साथ TRUE के रूप में घोषित करता है। और अगली पंक्ति में, हम फुलस्क्रीनकंट्रोल प्रॉपर्टी का उपयोग करके अपने डिफ़ॉल्ट टॉप-राइट पोज़िशन से फुलस्क्रीनकंट्रोल की उपस्थिति को नीचे-दाईं ओर बदलते हैं। इसी तरह, आप अन्य नियंत्रणों की स्थिति को समायोजित कर सकते हैं.

एक नियंत्रण चाहते हैं जो बिल्ट-इन के अलावा कुछ करता है? चिंता न करें, Google मानचित्र आपको अपने मानचित्र के लिए कस्टम नियंत्रण बनाने की भी अनुमति देता है.

मार्करों के बारे में बात करते हैं!

एक मार्कर जोड़ना

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

आइए एक मार्कर जोड़ें निम्नलिखित कोड के साथ लंदन ब्रिज:

मार्कर = नया google.maps दें। मार्कर ({
स्थान: {
lat: 51.506821,
lng: -0.0879
},
नक्शा: नक्शा,
शीर्षक: ‘द लंदन ब्रिज’
});

जैसा कि आप ऊपर देख सकते हैं, हमारे मार्कर के कोड में तीन गुण हैं। पहले एक निर्देशांक है। उसके बाद, हम मानचित्र चर को पास करते हैं जहां हमने शुरुआत में अपना नक्शा संग्रहीत किया था, और अंत में, हम मार्कर के शीर्षक को पास करते हैं.

आप उपरोक्त कोड ब्लॉक में आइकन प्रॉपर्टी के साथ कस्टम मार्कर आइकन पर URL भी पास कर सकते हैं.

एक InfoWindow जोड़ना

हो सकता है कि आपको हमारे मार्कर से कुछ गायब मिले। आमतौर पर, जब आप मानचित्र पर एक मार्कर पर क्लिक करते हैं, तो यह आपको अधिक विवरण के साथ एक पॉपअप दिखाता है। वह पॉपअप अपने आप में एक अलग घटक है जिसे a कहा जाता है InfoWindow.

Google मानचित्र एक कस्टम मार्कर के साथ।Google मानचित्र एक कस्टम मार्कर के साथ.

सौभाग्य से, हमारे लिए, अपने मार्कर के लिए एक InfoWindow संलग्न करना बहुत आसान है.

चलो जानकारी = नया google.maps.InfoWindow ({
सामग्री: ‘

लंदन ब्रिज


});

mod.addListener (‘क्लिक’, फंक्शन () {
infoWindow.open (मानचित्र, मार्कर);
});

सबसे पहले, हम एक नई जानकारी बनाते हैं। चर चर जो हमारे जानकारी घटक को संग्रहीत करता है। हम केवल उस सामग्री को पास करते हैं जिसमें HTML होता है जिसे क्लिक करने के बाद दिखाया जाता है। उसके बाद, हम अपने मार्कर पर एक ऑन-क्लिक ईवेंट श्रोता जोड़ते हैं, जो इसे मार्कर पर क्लिक करने पर जानकारी खोलने के लिए कहता है।.

ठीक उसी तरह, आप अपने नक्शे के साथ इंटरैक्टिव अनुभव बनाने के लिए एक मार्कर और एक सूचना का उपयोग कर सकते हैं.

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

गतिशील संशोधन & घटना सुनने वाले

मार्कर और मानचित्र विकल्प आवश्यक रूप से ऐसे कारण नहीं हैं कि कोई भी पहले से बनाए गए Google मानचित्र प्लगइन को खोदेगा और एपीआई पर स्विच करेगा। वे आशाजनक हैं, लेकिन बहुत सारे प्लगइन्स इन सुविधाओं को पहले से ही प्रदान करते हैं। चलिए कुछ ऐसा करते हैं जो एक प्लगइन के साथ संभव नहीं है.

गतिशील संशोधन

गूगल मैप्स है कई तरीके मानचित्र के साथ बातचीत करने और उसके व्यवहार को संशोधित करने के लिए। यदि आप DOM के साथ काम करने के आदी हैं, तो आपको इन तरीकों से ज्यादा परेशानी नहीं होनी चाहिए.

इनमें से कुछ तरीके आपको मानचित्र से जानकारी प्राप्त करने की अनुमति देते हैं, जैसे कि गेटकेंटर, जो मानचित्र के केंद्र निर्देशांक लौटाता है। और इसी तरह, कुछ आपको व्यवहार को बदलने की अनुमति देते हैं, जैसे सेटकेंटर, जो नक्शे के केंद्र को बदलता है.

कई विधियां हैं, और आपको उन सभी पर एक नज़र डालनी चाहिए, ताकि आप जान सकें कि एपीआई के साथ क्या संभव है। हमारे नक्शे के साथ इनमें से किसी एक विधि का उपयोग करें.

हम अपने उदाहरण के लिए एक बटन जोड़ सकते हैं जो हमारे नक्शे के केंद्र को लंदन शहर में वापस लाता है.

सबसे पहले, हमें अपने कोड में एक बटन जोड़ना होगा:

<बटन आईडी ="bringToCenter">Centerbutton को लाओ>

अब हम एक घटना श्रोता को हमारे बटन से जोड़ते हैं जो सेटकेंटर विधि को ट्रिगर करता है:

const centerButton = document.querySelector (‘#bringToCenter’);

CenterButton.addEventListener (‘क्लिक करें’, फंक्शन (e) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

और वह यह है। सरल, सही? हमने map.setCenter का उपयोग किया है जिसमें मानचित्र वह चर है जिसे हमने अपने मानचित्र को पकड़ने के लिए शुरुआत में घोषित किया था.

आपको विभिन्न तरीकों के साथ प्रयोग करने और एपीआई की सीमाओं का पता लगाने का प्रयास करना चाहिए.

घटना सुनने वाले

एक और अवधारणा जो जावास्क्रिप्ट डेवलपर्स से परिचित हो सकती है, वह घटना श्रोता है। आप क्रियाओं को विशिष्ट घटनाओं से जोड़ सकते हैं, जिसका अर्थ है कि जब कोई घटना घटती है, जैसे कि केंद्र का परिवर्तन, तो वे क्रियाएं ट्रिगर हो जाती हैं.

जब आप उस पर कहीं भी क्लिक करते हैं, तो मानचित्र के निर्देशांक प्राप्त करने के लिए Google मानचित्र के उदाहरणों में से एक उदाहरण लें.

जानकारी देंWindowLatLang;

map.addListener (‘क्लिक’, फंक्शन (मैप्सहाउस)
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = new google.maps.InfoWindow ({
स्थिति: mapMouseEvent.latLng
});

infoWindowLatLang.setContent (mapMouseEvent.latLng.toString ());
infoWindowLatLang.open (मानचित्र);
});

जैसा कि आप देख सकते हैं, अवधारणा बहुत अधिक है कि कैसे श्रोता जावास्क्रिप्ट में काम करते हैं। सबसे पहले, हम अपने मानचित्र पर एक ऑनक्लिक ईवेंट श्रोता संलग्न करते हैं। हमारे ईवेंट श्रोता के अंदर, हमें निर्देशांक मिलते हैं कि उपयोगकर्ता कहाँ क्लिक करता है और उसे एक इन्फोविन्डो के अंदर रखता है.

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

एक कस्टम नियंत्रण बनाना

और अंत में, हम इस लेख को इमारत के उदाहरण के साथ समाप्त करते हैं कस्टम नियंत्रण आपके Google मानचित्र के लिए.

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

सबसे पहले, हम इसके फ़ंक्शन के रूप में एक बटन का निर्माण करते हैं, जिसमें मानचित्र के केंद्र में एक मार्कर जोड़ने के लिए एक इवेंट श्रोता होता है.

आपको अपनी API कुंजी के साथ उपरोक्त कोड ब्लॉक में Your_API_KEY को बदलना होगा। यह अपने केंद्र के रूप में दिए गए अक्षांश और देशांतर के साथ एक सरल Google मानचित्र प्रस्तुत करता है.

समारोह MarkControl (controlDiv, मानचित्र) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px ठोस #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘पॉइंटर’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘मार्कर जोड़ने के लिए क्लिक करें’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘क्लिक’, फ़ंक्शन () {
new google.maps। मार्कर ({
स्थिति: map.getCenter (),
नक्शा: नक्शा
});
});
}

ऊपर दिए गए अधिकांश कोड हमारे बटन के लिए एक तत्व बनाते हैं। बहुत अंत में, हम एक घटना श्रोता को हमारे बटन से जोड़ते हैं जो मानचित्र के केंद्र में एक मार्कर जोड़ता है.

अब हमें अपने बटन को अपने मानचित्र में संलग्न करना होगा, जिसे हम निम्नलिखित कोड के साथ करते हैं:

const मार्करकंट्रोलिव = document.createElement (‘div’);
const मार्करकंट्रोल = नया मार्करकंट्रोल (मार्करकंट्रोलिव, मैप);
modControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (modControlDiv);

उपर्युक्त कोड हमारे बटन को मैप में उसके निचले बाएँ स्थान पर जोड़ता है। और वह यह है। यह सब अपने जावास्क्रिप्ट एपीआई का उपयोग करके Google मानचित्र में कस्टम नियंत्रण जोड़ने के लिए होता है.

Google बटन एक कस्टम बटन के साथ।निचले बाएँ कोने में एक कस्टम बटन के साथ गूगल मैप्स.

निष्कर्ष

इस लेख में हमने जो कुछ भी किया है उसका एक कार्यशील उदाहरण ऑनलाइन पर उपलब्ध है CodeSandbox.

यह इस लेख के लिए है, और मुझे आशा है कि इसने आपको Google मैप्स जावास्क्रिप्ट एपीआई के साथ काम करने के लिए कुछ आत्मविश्वास दिया है। यह उपयोग करने के लिए अविश्वसनीय रूप से सीधा है और आपको मानचित्र के साथ बहुत कुछ बनाने की अनुमति देता है!

अब आपको यह जानने का प्रयास करना चाहिए कि आपने आज क्या सीखा और Google मानचित्र का उपयोग करके अपने लिए एक डेमो प्रोजेक्ट बनाकर इसका अभ्यास करें। यदि आपके कोई प्रश्न हैं, तो हमें टिप्पणियों में बताएं; हम उन्हें जवाब देने के लिए खुश हैं!

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट और प्रस्तुति.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector