Cum să adăugați o hartă Google pe pagina Web

01 din 05

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

1. Conectați-vă la Google utilizând contul dvs. Google.
2. Accesați Consola pentru dezvoltatori
3. Derulați în listă și găsiți API-ul Google Maps v3, apoi faceți clic pe butonul "OFF" pentru ao activa.
4. Citiți și sunteți de acord cu termenii.
5. Accesați consola API și selectați "Acces API" din meniul din stânga
6. În secțiunea "Accesare API simplă", faceți clic pe butonul "Creați un nou server ...".
7. 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.
8. Copiați textul pe linia "API cheie:" (fără a include titlul). Aceasta este cheia dvs. API pentru hărțile dvs.

02 din 05

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.

1. Accesați Geocoder.us și introduceți adresa dvs. în caseta de căutare.
2. 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 (º).
3. 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 SUA, dacă trebuie să obțineți coordonatele dintr-o altă țară, ar trebui să căutați un instrument similar în regiunea dvs.

03 din 05

Adă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 la HEAD a documentului.

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.

După ce ați adăugat toate elementele scriptului la HEAD al documentului dvs., trebuie să vă poziționați harta pe pagină. Faceți acest lucru adăugând un element DIV cu atributul id = "map-canvas". 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 nu apare, încercați să inițializați-o cu un atribut BODY:

onload = "initialize ()" >

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ă ați setat opțiunile zoom și centru.
• Asigurați-vă că elementul dvs. DIV se află pe pagina cu codul de identificare corect.
• Asigurați-vă că elementul dvs. DIV are o înălțime.

04 din 05

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 Google Maps standard adăugați următoarele la script-ul dvs. sub var hartă = ... line:

var myLatlng = nou google.maps.LatLng ( latitudine, longitudine );
var marker = nou google.maps.Marker ({
pozitie: myLatlng,
harta: harta,
titlu: " fostul sediu de laughing-money.com "
});

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 05

Adă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.

1. 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.
2. 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.
3. 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 a doua );
   var myOptions2 = {zoom: 18, centru: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = nou google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. 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 , map: map2 , title: " Titlul dvs. de marcator "});
5. Apoi adăugați al doilea

   unde doriți cea de-a doua hartă. Și asigurați-vă că îi dați un ID id = "map_canvas_2".

6. Când se încarcă pagina dvs., se vor afișa două hărți

Iată codul unei pagini cu două hărți Google: