अपने वेब पेज पर Google मानचित्र कैसे जोड़ें

05 में से 01

अपनी साइट के लिए एक Google मानचित्र एपीआई कुंजी प्राप्त करें

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

आपको Google मानचित्र API v3 का उपयोग करने के लिए एपीआई कुंजी प्राप्त करने की आवश्यकता नहीं है, लेकिन यह बहुत उपयोगी है क्योंकि यह आपको अपने उपयोग की निगरानी करने और अतिरिक्त पहुंच के लिए भुगतान करने देता है। Google मैप्स एपीआई v3 प्रति उपयोगकर्ता अधिकतम प्रति अनुरोध 1 अनुरोध प्रति उपयोगकर्ता अधिकतम 25,000 अनुरोधों के लिए है। यदि आपके पृष्ठ उन सीमाओं से अधिक हैं तो आपको अधिक पाने के लिए बिलिंग सक्षम करने की आवश्यकता होगी।

Google मानचित्र API कुंजी कैसे प्राप्त करें

1. अपने Google खाते का उपयोग कर Google पर लॉगिन करें।
2. डेवलपर कंसोल पर जाएं
3. सूची के माध्यम से स्क्रॉल करें और Google मानचित्र API v3 ढूंढें, फिर इसे चालू करने के लिए "बंद करें" बटन पर क्लिक करें।
4. शर्तों को पढ़ें और सहमति दें।
5. एपीआई कंसोल पर जाएं और बाएं हाथ के मेनू से "एपीआई एक्सेस" का चयन करें
6. "सरल API एक्सेस" अनुभाग में, "नई सर्वर कुंजी बनाएं ..." बटन पर क्लिक करें।
7. अपने वेब सर्वर का आईपी पता दर्ज करें। यह वह आईपी है जहां से आपके मानचित्र अनुरोध आ रहे होंगे। अगर आपको अपना आईपी पता नहीं पता है, तो आप इसे देख सकते हैं।
8. टेक्स्ट को "एपीआई कुंजी:" लाइन पर कॉपी करें (उस शीर्षक सहित)। यह आपके मानचित्र के लिए आपकी एपीआई कुंजी है।

05 में से 02

समन्वय को अपना पता बदलें

अपने वेब पृष्ठों पर Google मानचित्र का उपयोग करने के लिए, आपको स्थान के लिए अक्षांश और देशांतर होना चाहिए। आप इन्हें जीपीएस से प्राप्त कर सकते हैं या आप हमें बताने के लिए Geocoder.us जैसे ऑनलाइन टूल का उपयोग कर सकते हैं।

1. Geocoder.us पर जाएं और खोज बॉक्स में अपना पता टाइप करें।
2. अक्षांश के लिए पहला नंबर कॉपी करें (सामने वाले अक्षर के बिना) और इसे एक टेक्स्ट फ़ाइल में पेस्ट करें। आपको डिग्री (º) सूचक की आवश्यकता नहीं है।
3. देशांतर के लिए पहले नंबर की प्रतिलिपि बनाएँ (फिर सामने के एक पत्र के बिना) और इसे अपनी टेक्स्ट फ़ाइल में पेस्ट करें।

आपका अक्षांश और देशांतर इस तरह कुछ दिखाई देगा:

40.756076
-७३.९,९०,८३८

Geocoder.us केवल यूएस पते के लिए काम करता है, अगर आपको दूसरे देश में निर्देशांक प्राप्त करने की आवश्यकता है, तो आपको अपने क्षेत्र में एक समान टूल खोजना चाहिए।

05 का 03

मानचित्र को अपने वेब पेज पर जोड़ना

सबसे पहले, मानचित्र स्क्रिप्ट को जोड़ें

आपके दस्तावेज़ का

अपना वेब पेज खोलें और अपने दस्तावेज़ के HEAD में निम्नलिखित जोड़ें।

हाइलाइट किए गए हिस्से को अक्षांश और देशांतर संख्याओं में बदलें जिन्हें आपने चरण दो में लिखा था।

दूसरा, अपने पृष्ठ पर मानचित्र तत्व जोड़ें

एक बार जब आपके दस्तावेज़ के HEAD में जोड़े गए सभी स्क्रिप्ट तत्व हों, तो आपको पृष्ठ पर अपना नक्शा रखना होगा। आप id = "map-canvas" विशेषता के साथ एक DIV तत्व जोड़कर ऐसा करते हैं। मैं अनुशंसा करता हूं कि आप इस div को चौड़ाई और ऊंचाई के साथ स्टाइल करें जो आपके पृष्ठ पर फिट होगा:

अंत में, अपलोड और टेस्ट

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

यदि आपका नक्शा दिखाई नहीं देता है, तो उसे बॉडी विशेषता के साथ प्रारंभ करने का प्रयास करें:

onload = "प्रारंभ करें ()" >

यह जांचने के लिए अन्य चीजें हैं कि आपका नक्शा लोड नहीं हो रहा है या नहीं:

• मामले सहित, अपनी जावास्क्रिप्ट में टाइपो की तलाश करें। जावास्क्रिप्ट केस संवेदनशील है।
• सुनिश्चित करें कि आपके पास ज़ूम और केंद्र विकल्प सेट हैं।
• सुनिश्चित करें कि आपका DIV तत्व सही आईडी वाले पृष्ठ पर है।
• सुनिश्चित करें कि आपके डीआईवी तत्व की ऊंचाई है।

04 में से 04

अपने मानचित्र में एक मार्कर जोड़ें

लेकिन आपके स्थान का नक्शा कितना अच्छा है यदि कोई मार्कर नहीं कहता है कि उन्हें कहां जाना चाहिए?

मानक Google मानचित्र लाल मार्कर जोड़ने के लिए var map = ... पंक्ति के नीचे अपनी स्क्रिप्ट में निम्नलिखित जोड़ें:

var myLatlng = new google.maps.LatLng ( अक्षांश, देशांतर );
var marker = new google.maps.Marker ({
स्थिति: myLatlng,
मानचित्र: मानचित्र,
शीर्षक: " पूर्व मुख्यालय मुख्यालय "
});

हाइलाइट किए गए टेक्स्ट को अपने अक्षांश और देशांतर में बदलें और वह शीर्षक जिसे आप दिखाना चाहते हैं जब लोग मार्कर पर होवर करते हैं।

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

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
स्थिति: latlng 2 ,
मानचित्र: मानचित्र,
शीर्षक: " ऐप्पल कंप्यूटर "
});

मार्कर के साथ Google मानचित्र का उदाहरण यहां दिया गया है। नोट, सीएसएस काम करता है जिस तरह से, मानचित्र को प्रकट करने के लिए आपको एक लिंक पर क्लिक करना होगा। यह आपके पृष्ठ पर नहीं होगा।

05 में से 05

अपने पृष्ठ पर दूसरा (या अधिक) मानचित्र जोड़ें

यदि आपने मेरा उदाहरण Google मानचित्र पृष्ठ देखा है तो आप देखेंगे कि मेरे पास पृष्ठ पर एक से अधिक मानचित्र प्रदर्शित हैं। यह करने में बहुत आसान है। ऐसे।

1. जैसा कि हमने इस ट्यूटोरियल के चरण 2 में सीखा है, उन सभी मानचित्रों का अक्षांश और देशांतर प्राप्त करें जिन्हें आप प्रदर्शित करना चाहते हैं।
2. जैसा कि हमने इस ट्यूटोरियल के चरण 3 में सीखा है, पहला नक्शा डालें। यदि आप मानचित्र को मार्कर रखना चाहते हैं, तो चरण 4 में मार्कर जोड़ें।
3. दूसरे मानचित्र के लिए, आपको अपनी प्रारंभिक () स्क्रिप्ट में 3 नई लाइनें जोड़ने की आवश्यकता होगी:
   var latlng2 = new google.maps.LatLng ( दूसरा निर्देशांक );
   var myOptions2 = {ज़ूम: 18, केंद्र: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. यदि आप नए मानचित्र पर मार्कर भी चाहते हैं, तो दूसरे निर्देशांक और दूसरे मानचित्र पर इंगित करने वाला दूसरा मार्कर जोड़ें:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , map: map2 , शीर्षक: " आपका मार्कर शीर्षक "});
5. फिर दूसरा जोड़ें

   जहां आप दूसरा नक्शा चाहते हैं। और इसे एक आईडी = "map_canvas_2" आईडी देना सुनिश्चित करें।

6. जब आपका पृष्ठ लोड होता है, तो दो मानचित्र प्रदर्शित होंगे

यहां एक पृष्ठ का कोड है जिसमें दो Google मानचित्र हैं: