01 nga 05
Merrni një API API të Google Maps për Site juaj
Mënyra më e mirë për të shtuar një hartë Google në faqen tuaj te internetit është të përdorni Google Maps API. Dhe Google rekomandon që të merrni një çelës API për të përdorur hartat.
Ju nuk keni nevojë të merrni një çelës API për të përdorur Google Maps API v3, por është shumë i dobishëm pasi ju lejon të monitoroni përdorimin tuaj dhe të paguani për akses shtesë. Google Maps API v3 ka një kuotë prej 1 kërkese për sekondë për përdorues deri në maksimum prej 25,000 kërkesave në ditë. Nëse faqet e tua tejkalojnë këto kufizime, duhet të aktivizoni faturimin në mënyrë që të merrni më shumë.
Si të merrni një API API të Google Maps
- Hyni në Google duke përdorur llogarinë tuaj në Google.
- Shko te Developers Console
- Shkoni nëpër listë dhe gjeni API Google Maps API v3, pastaj klikoni butonin "OFF" për ta aktivizuar atë.
- Lexoni dhe pajtohuni me kushtet.
- Shko te tastierën e API-ve dhe zgjidhni "API Access" nga menyja e majtë
- Në seksionin "Hyrje të thjeshtë API" klikoni në butonin "Krijo çelësin e ri të serverit ...".
- Futni adresën IP të serverit tuaj të internetit. Kjo është IP ku do të vijnë nga kërkesat tuaja për Hartat. Nëse nuk e dini adresën tuaj IP, ju mund ta shihni atë.
- Kopjoni tekstin në linjën "Kyçja API:" (duke mos përfshirë atë titull). Ky është çelësi juaj API për hartat tuaja.
02 nga 05
Konvertoni adresën tuaj në koordinata
Për të përdorur Google Maps në faqet tuaja të internetit, duhet të keni gjerësi dhe gjatësi për vendin. Ju mund të merrni këto nga një GPS ose ju mund të përdorni një mjet në internet si Geocoder.us për t'ju treguar.
- Shkoni te Geocoder.us dhe shkruani adresën tuaj në kutinë e kërkimit.
- Kopjoni numrin e parë për gjerësinë (pa një letër përpara) dhe ngjisni atë në një skedar teksti. Ju nuk keni nevojë për treguesin e shkallës (º).
- Kopjo numrin e parë për gjatësinë (përsëri pa një letër përpara) dhe ngjisni atë në skedarin tuaj të tekstit.
Gjatësia dhe gjerësia juaj do të duken si kjo:
40.756076
-73,990838
Geocoder.us funksionon vetëm për adresat e SHBA, nëse keni nevojë të merrni koordinatat në një vend tjetër, duhet të kërkoni një mjet të ngjashëm në rajonin tuaj.
03 nga 05
Shtimi i Hartave në faqen tuaj Web
Së pari, Shtoji skriptin e hartës në
e Dokumentit Tuaj
Hapni faqen tuaj të internetit dhe shtoni në vijim në krye të dokumentit tuaj.
Ndryshoni pjesën e theksuar në gjerësinë dhe gjatësinë që keni shkruar në hapin e dytë.
Së dyti, Shto elementin e Hartave në faqen tënde
Pasi të keni të gjitha elementet e shkrimit të shtuar në HEAD të dokumentit tuaj, ju duhet të poziciononi hartën tuaj në faqe. Ju bëni këtë duke shtuar një element DIV me atributin id = "map-canvas". Unë ju rekomandoj gjithashtu të stilit të këtij div me gjerësinë dhe lartësinë që do të përshtatet në faqen tuaj:
Së fundi, Ngarko dhe Test
Gjëja e fundit që duhet të bësh është të ngarkosh faqen tënde dhe të provosh që tregon hartë tënde. Këtu është një shembull i një hartë Google në faqe. Vini re, për shkak të mënyrës së funksionimit të CMS-it të Rrethit, ju do të duhet të klikoni një lidhje për të hyrë në hartë. Kjo nuk do të ndodhë në faqen tuaj.
Nëse hartë nuk shfaqet, provoni ta filloni me një atribut BODY:
onload = "inicializo ()" >
Gjëra të tjera për të kontrolluar nëse harta juaj nuk po ngarkon:
- Shiko për gabimet e gabimeve në JavaScript, duke përfshirë edhe rastin. JavaScript është i ndjeshëm ndaj çështjes.
- Sigurohuni që të keni opsionet e zmadhimit dhe qendrës.
- Sigurohuni që elementi juaj DIV të jetë në faqen me ID të saktë.
- Sigurohuni që elementi juaj DIV ka një lartësi.
04 nga 05
Shto një Marker në Hartën Tënde
Por, çfarë të mirë është një hartë e vendndodhjes suaj nëse nuk ka tregues që tregon njerëzit ku duhet të shkojnë?
Për të shtuar një shënues të kuq të standardeve Google Maps, shtojini në vijim skriptin tuaj poshtë var map = ... vijë:
var myLatlng = new google.maps.LatLng ( gjerësi, gjatësi );
var marker = new google.maps.Marker ({
pozita: myLatlng,
harta: hartë,
titulli: " Ish-Shtabi i " About.com "
});
Ndrysho tekstin e theksuar në gjerësinë dhe gjatësinë tënde dhe titullin që do të donit të shfaqesh kur njerëzit rri pezull mbi shënuesin.
Ju mund të shtoni sa më shumë shënues në faqe si ju pëlqen, thjesht shtoni variabla të rinj me koordinata dhe tituj të rinj, por nëse harta është shumë e vogël për të shfaqur të gjithë shënuesit, ata nuk do të tregohen nëse lexuesi nuk zmadhohet.
var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
pozicioni: latlng 2 ,
harta: hartë,
titulli: " Kompjuter Apple "
});
Këtu është një shembull i një hartë Google me një shënues. Vini re, për shkak të mënyrës së funksionimit të CMS-it në Rreth, ju duhet të klikoni një lidhje për të hyrë në hartë. Kjo nuk do të ndodhë në faqen tuaj.
05 e 05
Shto një hartë të dytë (ose më shumë) në faqen tuaj
Nëse keni shikuar në shembullin tim në Google Maps, do të vini re se unë kam më shumë se një hartë të shfaqur në faqe. Kjo është shumë e lehtë për të bërë. Ja se si.
- Merrni gjerësinë dhe gjatësinë e të gjitha hartave që dëshironi të shfaqni siç mësuam në hapin 2 të këtij udhëzuesi.
- Fut hartën e parë si kemi mësuar në hapin 3 të këtij tutorial. Nëse doni që harta të ketë një shënues, shtoni shënuesin si në hapin 4.
- Për hartën e dytë, do të duhet të shtoni 3 rreshta të reja në scriptin tuaj të inicializimit ():
var latlng2 = google.maps.LatLng i ri ( koordinatat e dyta );
var myOptions2 = {zoom: 18, qendra: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = google.maps.Map i ri (document.getElementById ("map_canvas_2"), myOptions2); - Nëse doni një shënues në hartën e re gjithashtu, shtoni një shënues të dytë që tregon në koordinatat e dytë dhe në hartën e dytë:
var myMarker2 = google.maps.Marker i ri ({position: latlng2 , harta: map2 , titulli: " Titulli i Markerit "}); - Pastaj shtoni të dytën
ku doni hartën e dytë. Dhe sigurohuni që t'i jepni një id = "map_canvas_2" ID.
- Kur të ngarkoni faqen tuaj, do të shfaqen dy harta
Këtu është kodi i një faqeje me dy harta të Google në të: