आपल्या वेब पृष्ठ एक Google नकाशा जोडा कसे

05 ते 01

आपल्या साइटसाठी Google नकाशे API की मिळवा

आपल्या वेबसाइटवर Google नकाशा जोडण्याचा सर्वोत्तम मार्ग म्हणजे Google Maps API वापरणे. आणि Google शिफारस करते की आपल्याला नकाशे वापरण्यासाठी API की मिळते.

आपण Google नकाशे API v3 वापरण्यासाठी एपीआय की मिळविण्याची गरज नाही, परंतु हे अतिशय उपयुक्त आहे कारण ते आपल्याला आपल्या वापरावर लक्ष ठेवण्यास आणि अतिरिक्त प्रवेशासाठी देय देतात. Google Maps API v3 मध्ये प्रति दिन जास्तीतजास्त 25,000 विनंत्यांकडे प्रति सेकंद 1 विनंतीची कोटा आहे. जर आपल्या पृष्ठांची मर्यादा ओलांडली तर आपल्याला अधिक प्राप्त करण्यासाठी बिलिंग सक्षम करणे आवश्यक आहे.

Google नकाशे API की कशी मिळवायची

1. आपल्या Google खात्याचा वापर करुन Google ला लॉग इन करा.
2. विकसक कन्सोल वर जा
3. सूचीमधून स्क्रॉल करा आणि Google नकाशे API v3 शोधा, नंतर तो चालू करण्यासाठी "बंद करा" बटण क्लिक करा.
4. अटी वाचा आणि मान्य करा
5. API कन्सोल वर जा आणि डाव्या-हाताच्या मेनूमधून "API प्रवेश" निवडा
6. "सिंपल एपीआय प्रवेश" विभागामध्ये, "नवीन सर्व्हर की तयार करा ..." बटणावर क्लिक करा.
7. आपल्या वेब सर्व्हरचा IP पत्ता प्रविष्ट करा. हा IP आहे जेथे आपले नकाशे विनंती येणार आहेत. आपल्याला आपला IP पत्ता माहित नसल्यास, आपण तो शोधू शकता
8. "API की:" ओळीवर मजकूर कॉपी करा (त्या शीर्षकसह नाही). हे आपल्या नकाशे साठीची आपली API की आहे.

02 ते 05

समन्वय आपल्या पत्त्यामध्ये रुपांतरीत करा

आपल्या वेब पृष्ठांवर Google नकाशे वापरण्यासाठी, आपल्याकडे स्थानासाठी अक्षांश आणि रेखांश असणे आवश्यक आहे. आपण हे GPS कडून मिळवू शकता किंवा GeoCoder.us सारखे ऑनलाइन टूल आपल्याला सांगू शकता.

1. Geocoder.us वर जा आणि शोध बॉक्समध्ये आपल्या पत्त्यामध्ये टाइप करा.
2. अक्षांकरिता प्रथम क्रमांक कॉपी करा (समोर पत्र न ठेवता) आणि ती एका मजकूर फाइलमध्ये पेस्ट करा. आपल्याला डिग्रीची आवश्यकता नाही (º) सूचक
3. रेखांशसाठी प्रथम नंबर कॉपी करा (पुन्हा आपल्या पत्रात न घेता) आणि आपल्या मजकूर फाइलमध्ये पेस्ट करा.

आपले अक्षांश आणि रेखांश यासारखे दिसेल:

40.756076
-73.9 9 0838

Geocoder.us केवळ यूएस पत्त्यांसाठी कार्य करते, आपल्याला दुसर्या देशात समन्वय साधण्याची आवश्यकता असल्यास, आपण आपल्या प्रदेशामधील समान साधन शोधावे.

03 ते 05

आपल्या वेब पृष्ठावर नकाशा जमा करणे

प्रथम, नकाशा स्क्रिप्ट जोडा

आपल्या दस्तऐवजाच्या

आपले वेब पृष्ठ उघडा आणि आपल्या दस्तऐवजाच्या HEAD मध्ये खालील जोडा.

हायलाइट केलेला भाग आपण दोन पायरीमध्ये लिहिलेल्या अक्षांश आणि रेखांश संख्यांशी बदला.

सेकंद, आपल्या पृष्ठावर नकाशा घटक जोडा

एकदा आपल्याकडे आपल्या दस्तऐवजाच्या HEAD वर जोडलेली सर्व स्क्रिप्ट घटक असल्यास, आपल्याला आपले नकाशा पृष्ठावर ठेवण्याची आवश्यकता आहे. आपण id = "map-canvas" विशेषतासह एक DIV घटक जोडून हे करू शकता. मी आपल्याला या पृष्ठाची शैली आपल्या पृष्ठावर फिटणार्या रुंदी आणि उंचीसह अशी शिफारस करतो:

शेवटी अपलोड आणि टेस्ट करा

करण्यासाठी शेवटची गोष्ट आपले पृष्ठ अपलोड करा आणि आपला नकाशा प्रदर्शित करते ती चाचणी करा. येथे पृष्ठावर Google नकाशाचे उदाहरण आहे लक्षात ठेवा, About.com CMS कार्यपद्धतीमुळे, आपल्याला नकाशा दिसेल तो एक दुवा क्लिक करणे आवश्यक आहे. हे आपल्या पृष्ठावर नसणार.

आपला नकाशा दिसत नसल्यास, तिला बीडीआय सत्यापनासह प्रारंभ करण्याचा प्रयत्न करा:

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

आपला नकाशा लोड होत नाही का ते तपासण्यासाठी इतर गोष्टींचा समावेश आहे:

• आपल्या जावास्क्रिप्टमधील टायपोस पहा, ज्यात केस समाविष्ट आहे. जावास्क्रिप्ट मामले संवेदनशील आहे.
• आपल्याकडे झूम आणि केंद्र पर्याय सेट आहेत याची खात्री करा.
• आपला DIV घटक योग्य ID सह पृष्ठावर असल्याचे सुनिश्चित करा.
• आपल्या DIV घटकास एक उंची आहे याची खात्री करा.

04 ते 05

आपल्या नकाशावर मार्कर जोडा

आपल्या मार्गाचा नकाशा असेल तर तेथे कोणी मार्केटर नसल्यास लोकांना कोठे जायचे आहे?

मानक Google नकाशे लाल चिन्हक जोडण्यासाठी var नकाशा = ... ओळीखालील आपल्या स्क्रिप्टला खालील समाविष्ट करा:

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

हायलाइट केलेला मजकूर आपल्या अक्षांश आणि रेखांशवर बदला आणि आपण जेव्हा शीर्षस्थानी मार्करवर फिरू इच्छिता तेव्हा प्रदर्शित होणारे शीर्षक.

आपल्याला आवडत असल्याप्रमाणे आपण पृष्ठावर बर्याच चिन्हक जोडू शकता, फक्त नवीन समन्वय आणि शीर्षके असलेले नवीन व्हेरिएबल्स जोडा, परंतु जर नकाशा सर्व मार्कर प्रदर्शित करण्यासाठी खूपच लहान असेल तर ते रीडर जूम आउट न केल्यास ते दर्शविले जाणार नाहीत.

var latlng 2 = नवीन google.maps.LatLng ( 37.33165 9 1, -122.0301778 );
var myMarker 2 = नवीन google.maps.Marker ({
स्थान: latlng 2 ,
नकाशा: नकाशा,
शीर्षक: " ऍपल संगणक "
});

येथे एक चिन्हक असलेल्या Google नकाशाचे उदाहरण आहे. लक्षात ठेवा, About.com CMS कार्यपद्धतीमुळे, आपल्याला नकाशा दिसेल यासाठी एक दुवा क्लिक करणे आवश्यक आहे. हे आपल्या पृष्ठावर नसणार.

05 ते 05

आपल्या पृष्ठासाठी दुसरी (किंवा अधिक) नकाशा जोडा

आपण माझे उदाहरण Google नकाशे पेजकडे पाहिले असेल तर आपल्याला कळेल की माझ्याकडे पृष्ठावर प्रदर्शित एकापेक्षा अधिक नकाशा आहेत. हे करणे खूप सोपे आहे. कसे ते येथे आहे

1. या ट्युटोरियलच्या चरण 2 मध्ये आपण शिकत असलेल्या सर्व नकाशांवरील अक्षांश आणि रेखांश मिळवा.
2. या ट्यूटोरियल च्या चरण 3 मध्ये आपण शिकलो त्याप्रमाणे पहिला नकाशा समाविष्ट करा. आपण नकाशावर मार्कर घेऊ इच्छित असल्यास, 4 व्या चरणात चिन्हांकित करा
3. दुसर्या नकाशासाठी, आपल्याला आपल्यास () स्क्रिप्टसाठी 3 नवीन ओळी जोडणे आवश्यक आहे:
   var latlng2 = नवीन google.maps.LatLng ( दुसरा निर्देशांक );
   var myOptions2 = {झूम: 18, केंद्र: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = नवीन google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. जर आपण नवीन नकाशावर चिन्हक देखील इच्छित असल्यास, दुसरा निर्देशक आणि दुसरे नकाशावर दिलेले दुसरी मार्कर जोडा.
   var myMarker2 = नवीन google.maps.Marker ({स्थान: latlng2 , नकाशा: map2 , शीर्षक: " आपले चिन्हक शीर्षक "});
5. मग दुसरे जोडा

   जेथे आपण दुसरा नकाशा हवा आहे आणि त्याला id = "map_canvas_2" ID देण्याचे सुनिश्चित करा

6. जेव्हा आपले पृष्ठ लोड होईल, तेव्हा दोन नकाशे प्रदर्शित होतील

त्यावर दोन Google नकाशे असलेल्या पृष्ठाचा असा कोड आहे: