तपाईंको वेब पृष्ठमा Google नक्सा कसरी थप्नुहोस्

01 of 05

तपाईंको साइटको लागि Google Maps API कुञ्जी प्राप्त गर्नुहोस्

तपाईंको वेबसाइटमा Google नक्सा थप्न उत्तम तरीका Google Maps API प्रयोग गर्न हो। र Google ले सुझाव दिन्छ कि तपाईंले API प्रयोग गर्न API कुञ्जी प्राप्त गर्नुहुनेछ।

तपाईंलाई Google नक्सा API v3 प्रयोग गर्न API कुञ्जीको आवश्यकता पर्दैन, तर यो धेरै उपयोगी छ किनभने यसले तपाईंलाई आफ्नो प्रयोगको अनुगमन गर्न र थप पहुँचको लागि तिर्न अनुमति दिन्छ। Google Maps API v3 प्रति सेकेंड 1,000 अनुरोध प्रति प्रति सेकेंड 1 अनुरोध को कोटा छ। यदि तपाइँका पृष्ठहरू ती सीमाहरू पार गर्दछन् भने बढी प्राप्त गर्न तपाईंलाई बिलिङ सक्षम गर्न आवश्यक पर्दछ।

Google Maps API कुञ्जी कसरी प्राप्त गर्ने

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

02 को 05

निर्देशकहरूलाई तपाईंको ठेगाना परिवर्तन गर्नुहोस्

तपाईंको वेब पृष्ठहरूमा Google नक्शा प्रयोग गर्न, तपाईंले स्थानको लागि अक्षांश र देशान्तरको पालना गर्न आवश्यक छ। तपाईँ यी GPS बाट प्राप्त गर्न सक्नुहुनेछ वा तपाइँलाई बताउनको लागी Geocoder.us जस्ता अनलाइन उपकरण प्रयोग गर्न सक्नुहुन्छ।

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

तपाईंको अक्षांश र देशान्तर यो जस्तै केहि देखिन्छ:

40.756076
-73.990838

Geocoder.us अमेरिकाको ठेगानाका लागि मात्र काम गर्दछ, यदि तपाईंलाई अर्को देशमा समन्वय प्राप्त गर्न आवश्यक छ भने तपाईले तपाइँको क्षेत्रमा समान उपकरण खोजी गर्नु पर्दछ।

03 of 05

तपाईंको वेब पृष्ठमा नक्शा थप्दै

पहिलो, नक्सा स्क्रिप्टमा थप्नुहोस्

तपाईको दस्तावेजको

तपाईंको वेब पेज खोल्नुहोस् र तपाईंको कागजातको HEAD मा निम्न थप्नुहोस्।

हाइलाइट गरिएको अंश अक्षांश र देशान्तर नम्बरहरूमा परिवर्तन गर्नुहोस् जुन तपाईंले चरण दुईमा लेख्नुभयो।

दोस्रो, तपाईंको पृष्ठमा नक्सा तत्व थप्नुहोस्

एक पटक तपाईंको लिपि तत्वहरू तपाईंको कागजातको HEAD मा थपिसकेपछि, तपाईंले आफ्नो नक्सालाई पृष्ठमा स्थान दिन आवश्यक छ। तपाईले यो id = "नक्सा-क्यानवास" विशेषताको साथ एउटा DIV तत्व थपेर यसो गर्नु हुन्छ। म तपाईंलाई सिफारिस गर्दछु यो डिभ पनि चौडाई र उचाइको साथमा जुन तपाईंको पृष्ठमा उपयुक्त हुनेछ:

अन्तमा, अपलोड र परीक्षण

अन्तिम कुरा गर्न तपाईंको पृष्ठ अपलोड गरीन्छ र परीक्षण गर्नुहोस् जुन तपाईंको नक्शा प्रदर्शन गर्दछ। यहाँ पृष्ठमा गुगल नक्साको उदाहरण हो। नोट, कि बारे मा सीएसएम काम गर्दछ जसको तरिका, तपाईंले नक्शा देखाउनको लागी एक लिङ्क क्लिक गर्नुपर्दछ। यो तपाईंको पृष्ठ मा मामला हुनेछैन।

यदि तपाईंको नक्सा देखाइएको छैन भने, यसलाई BODY विशेषताको साथ सुरू गर्ने प्रयास गर्नुहोस्:

onload = "initialize ()" >

तपाईंको नक्सा लोड हुँदैछ भने जाँच गर्न अन्य चीजहरू समावेश छन्:

• तपाईंको जाभास्क्रिप्टमा टाइपसको लागि हेर्नुहोस्, मामला सहित। जाभास्क्रिप्ट कोस संवेदनशील छ।
• निश्चित गर्नुहोस् कि तपाईंको जुम र केन्द्र विकल्पहरू सेट छ।
• सुनिश्चित गर्नुहोस् कि तपाईंको DIV तत्व सही आईडीको साथ पृष्ठमा छ।
• सुनिश्चित गर्नुहोस् कि तपाईंको DIV तत्वको उचाई छ।

04 को 05

तपाईंको नक्सामा मार्कर थप्नुहोस्

तर तपाईंको स्थान को एक नक्शा के राम्रो हो भने यदि मार्कर छ कि उनि कहाँ जाना चाहिए बता रहे हो?

मानक गुगल नक्साहरू थप्नको लागी रातो मार्कर तल तपाईंको लिपिमा निम्न को लागी var नक्सा = ... रेखा:

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

हाइलाइट गरिएको टेक्स्ट तपाईंको अक्षांश र देशान्तरमा र परिवर्तन गर्नुहोस् जब तपाइँ मार्कर माथि घुमाउन चाहानु भएको शीर्षक देखा पर्दछ।

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

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

यहाँ मार्करको साथ Google नक्साको उदाहरण हो। नोट, राती .com CMS काम गर्दछ जसको तरिकाले, तपाईंले नक्सा प्राप्त गर्न लिंकमा क्लिक गर्नु पर्छ। यो तपाईंको पृष्ठ मा मामला हुनेछैन।

05 को 05

दोस्रो (वा थप) तपाईंको पृष्ठमा नक्सा थप्नुहोस्

यदि तपाईंले मेरो उदाहरण Google नक्सा पृष्ठ देख्नुभयो भने तपाईले सूचना दिनुहुनेछ कि मेरो पृष्ठमा प्रदर्शित एक भन्दा धेरै नक्सा छ। यो गर्न सजिलो छ। यहाँ कसरी छ

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

   तपाई कहाँ दोस्रो नक्सा चाहनुहुन्छ? र यो आईडी = "map_canvas_2" आईडी दिन निश्चित गर्नुहोस्।

6. जब तपाईंको पृष्ठ लोड हुन्छ, दुई नक्शाहरू प्रदर्शन हुनेछ

यहाँ पृष्ठको कोड हो जुन यसमा दुई Google नक्साहरू छन्: