Obțineți o cheie API Google Maps pentru site-ul dvs.
Cea mai bună modalitate de a adăuga o hartă Google pe site-ul dvs. Web este să utilizați API-ul Google Maps. Și Google vă recomandă să obțineți o cheie API pentru a utiliza hărțile.
Nu vi se cere să obțineți o cheie API pentru a utiliza Google Maps API v3, dar este foarte util, deoarece vă permite să monitorizați utilizarea dvs. și să plătiți pentru acces suplimentar. API-ul Google Maps v3 are o cotă de 1 solicitare pe secundă per utilizator, la un număr maxim de 25.000 de solicitări pe zi. Dacă paginile dvs. depășesc aceste limite, va trebui să activați facturarea pentru a obține mai multe.
Cum se obține o cheie API Google Maps
- Conectați-vă la Google utilizând contul dvs. Google.
- Accesați Consola pentru dezvoltatori
- Derulați în listă și găsiți API-ul Google Maps v3, apoi faceți clic pe butonul "OFF" pentru ao activa.
- Citiți și sunteți de acord cu termenii.
- Accesați consola API și selectați "Acces API" din meniul din stânga
- În secțiunea "Accesare API simplă", faceți clic pe butonul "Creați un nou server …".
- Introduceți adresa IP a serverului dvs. web. Acesta este IP-ul în care vor veni cererile dvs. din Hărți. Dacă nu cunoașteți adresa IP, puteți să o căutați.
- Copiați textul pe linia "API cheie:" (fără a include titlul). Aceasta este cheia dvs. API pentru hărțile dvs.
Conversia adresei dvs. la coordonate
Pentru a utiliza Google Maps în paginile dvs. web, trebuie să aveți latitudinea și longitudinea locației. Puteți obține aceste informații de la un GPS sau puteți utiliza un instrument online, cum ar fi Geocoder.us, pentru a vă spune.
- Accesați Geocoder.us și introduceți adresa dvs. în caseta de căutare.
- Copiați primul număr pentru latitudine (fără o literă în față) și lipiți-l într-un fișier text. Nu aveți nevoie de indicatorul grad (º).
- Copiați primul număr pentru longitudine (din nou fără o literă în față) și lipiți-l în fișierul text.
Latitudinea și longitudinea dvs. vor arăta astfel:
40.756076-73.990838
Geocoder.us funcționează numai pentru adresele din S.U.A., dacă trebuie să obțineți coordonatele în altă țară, trebuie să căutați un instrument similar în regiunea dvs.
03 din 05Adăugarea hărții la pagina Web
Mai întâi, adăugați scriptul hărții la
din documentul dvs.
Deschideți pagina Web și adăugați următoarele elemente la CAP din documentul dvs.
Schimbați porțiunea evidențiată la numerele de latitudine și longitudine pe care le-ați notat la pasul doi.
În al doilea rând, adăugați elementul de hartă pe pagina dvs.
Odată ce ați adăugat toate elementele scriptului la CAP din documentul dvs., trebuie să vă poziționați harta pe pagină. Faceți acest lucru adăugând o DIV element cu id = "harta-panza" atribut. Vă recomandăm să stilizați și acest div cu lățimea și înălțimea care se vor potrivi pe pagina dvs.:
În cele din urmă, încărcați și testați
Ultimul lucru pe care trebuie să-l faceți este încărcarea paginii dvs. și testarea afișării hărții. Iată un exemplu de hartă Google pe pagină. Rețineți, din cauza modului în care funcționează About.com CMS, va trebui să faceți clic pe un link pentru a obține harta să apară. Acest lucru nu va fi cazul în pagina dvs.
Dacă harta dvs. nu apare, încercați să inițializați-o cu un a CORP atribut:
onload = "inițializa ()" >
Alte lucruri pentru a verifica dacă hărțile dvs. nu se încarcă includ:
- Căutați JavaScript în JavaScript, inclusiv cazul. JavaScript este sensibil la minuscule.
- Asigurați-vă că aveți
zoomșicentrusetările opțiunilor. - Asigurați-vă că dvs.
DIVelementul se află pe pagina cu ID-ul corect. - Asigurați-vă că dvs.
DIVelementul are o înălțime.
Adăugați un marcator în harta dvs.
Dar ce bine este o hartă a locației dvs. dacă nu există nici un indicator care să spună oamenilor unde ar trebui să meargă?
Pentru a adăuga un marcaj roșu standard Google Maps, adăugați următoarele în scriptul dvs. sub var hartă = … linia:
var myLatlng = nou google.maps.LatLng ( latitudine longitudine );var marker = nou google.maps.Marker ({pozitie: myLatlng,harta: harta,titlu:" Fostul sediu de la '});
Schimbați textul evidențiat la latitudinea și longitudinea dvs. și titlul pe care doriți să îl afișați când oamenii se deplasează peste marcator.
Puteți adăuga cât mai multe marcatori la pagina dorită, doar adăugați noi variabile cu noi coordonate și titluri, dar dacă harta este prea mică pentru a afișa toate marcatorii, acestea nu se vor afișa dacă cititorul nu se micșorează.
var latlng 2 = nou google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nou google.maps.Marker ({pozitie: latlng 2 ,harta: harta,titlu:" Apple Computer '});
Iată un exemplu de hartă Google cu un marcator. Rețineți, din cauza modului în care funcționează About.com CMS, trebuie să faceți clic pe un link pentru a obține harta să apară. Acest lucru nu va fi cazul în pagina dvs.
05 din 05Adăugați o a doua (sau mai multe) hartă pe pagina dvs.
Dacă v-ați uitat la exemplul paginii mele de hărți Google veți observa că pe pagină sunt afișate mai multe hărți. Acest lucru este foarte ușor de făcut. Iată cum.
- Obțineți latitudinea și longitudinea tuturor hărților pe care doriți să le afișați așa cum am învățat la pasul 2 al acestui tutorial.
- Introduceți prima hartă așa cum am învățat în pasul 3 al acestui tutorial. Dacă doriți ca harta să aibă un marcator, adăugați marcatorul ca la pasul 4.
- Pentru cea de-a doua hartă, va trebui să adăugați 3 linii noi în scriptul dvs. initialize ():
var latlng2 = nou google.maps.LatLng ( coordonatele secundare );var myOptions2 = {zoom: 18, centru: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = nou google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Dacă doriți și un marcator pe noua hartă, adăugați un al doilea marcator indicând coordonatele secunde și a doua hartă:
var myMarker2 = nou google.maps.Marker ({position: latlng2 , Hartă: map2 , titlu:" Titlul dvs. de marcator ' }); - Apoi adăugați al doilea loc unde doriți cea de-a doua hartă. Și asigurați-vă că o veți da
id = "map_canvas_2"ID-ul. - Când se încarcă pagina dvs., se vor afișa două hărți
Iată codul unei pagini cu două hărți Google:
