Acesta este modul în care utilizați API-ul Google Maps - screencast

Deci, clientul dvs. vă trimite un e-mail și întreabă: "Puteți pune una din aceste hărți în pagina mea de contact, astfel încât utilizatorii să poată vedea clădirea noastră din punctul de vedere al satelitului?". Ați folosit Google hărți de mai multe ori, dar există o singură problemă: nu aveți idee cum să utilizați API-ul. Pune-ți lingura și sapa!

* Faceți clic pe comutarea pe ecran complet.

Pasul 1: obțineți o cheie API unică

Dacă ați descărcat codul sursă care este furnizat cu acest articol, ați descoperi că nu funcționează pe site-ul dvs. Web. Motivul este că Google solicită tuturor utilizatorilor să obțină o cheie "API" unică pentru fiecare site care implementează hărțile Google.

Nu te teme. Este gratuit 100% și durează aproximativ treizeci de secunde pentru a vă înscrie. Mai întâi, accesați pagina de înscriere Google și introduceți adresa URL a site-ului dvs. web. Nu vă faceți griji cu privire la adăugarea unei căi specifice. Adresa URL a root va acoperi fiecare pagină care face parte din acel domeniu. Acceptați termenii și condițiile și faceți clic pe "Generați API".

Asta e! Pagina pe care ați fost redirecționată conține cheia dvs. unică, precum și o pagină de eșantion - pentru a servi drept curs de accidente. Cheia va arata cam ca:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Veți găsi, de asemenea, o cale de script care va arăta astfel:

Dumneavoastră veți fi diferit de a mea, deoarece va conține valoarea dvs. cheie specifică. Copiați-l și inserați-l în porțiunea capului documentului.

S-ar putea să doriți să marcați link-ul către documentația API. Veți fi, fără îndoială, referindu-vă la progresul abilităților dumneavoastră.

Pasul 2: Configurarea codului HTML

Din motive de simplitate, vom crea un layout oase goale. Adăugați următoarele elemente în elementul corp al documentului.

Într-o situație reală a lumii, ar trebui să mutați stilul într-un fișier extern (așa cum am făcut în videoclip). Valorile înălțimii și lățimii vor fi utilizate de API pentru a determina dimensiunile hărții tale. Nu vă faceți griji, nimic nu va fi tăiat.

Pasul 3: Javascript

Apoi, adăugați următoarele în fișierul Javascript. Revedeți-o puțin și apoi continuați.

 $ (functie () // cand documentul este pregatit pentru a fi manipulat daca (GBrowserIsCompatible ()) // daca browserul este compatibil cu varful map = document.getElementById ("myMap"); elementul var m = nou GMap2 (harta); // noua instanta a clasei GMap2 si trecerea in locatia noastra div m.setCenter (new GLatLng (36.158887, -86.782056), 13); // pass in latitude, longitude si nivelul de zoom. else alert ("Browserul dvs. nu este demn"););

Pentru a lua acest cod de linie pe linie:

• Când documentul este gata pentru a fi manipulat, executați codul înăuntru. Aceasta este o sintaxă jQuery, dar jQuery nu este necesar cel puțin. De asemenea, puteți adăuga un atribut "onLoad ()" la elementul corpului dvs. - deși acest lucru este dezordonat.
• Dacă browserul de la care utilizatorul accesează harta nu este compatibil cu API, atunci afișați o alertă (a se vedea partea de jos). Altfel, rulați codul înăuntru.
• Creați o variabilă numită "hartă" și spuneți-i să găsească div-ul care va conține harta.
• Apoi, creați o variabilă numită "m" și o faceți egală cu o nouă instanță a clasei "GMap2". În paranteză, treceți în variabila "hartă" pe care tocmai ați creat-o anterior
• În cele din urmă, setați un punct central astfel încât harta să știe ce să arate. Pentru a face acest lucru, vom crea o nouă instanță a clasei "GLatLng" și vom trece în valorile latitudinii și longitudinii. Puteți merge aici pentru a apuca valorile corespunzătoare. În cazul meu, am stabilit coordonatele în orașul meu natal. După aceea, puteți introduce opțional un nivel de zoom - pe care l-am setat la standardul "13".

Numai acest cod vă va oferi o hartă de bază care ar putea fi complet potrivită nevoilor dumneavoastră. Cu toate acestea, dacă doriți să implementați funcții "zoom" și "mod de hartă", citiți mai departe.

Pasul 4: Rafinarea hărții noastre

Există literalmente zeci de caracteristici pe care le puteți adăuga pe hartă. Vom trece peste câțiva dintre ei. În primul rând, vom implementa o bară de zoom, care va permite utilizatorilor să mărească sau să scadă în mod incremental.

 m.addControl (noul GLargeMapControl ())

Aici, luăm harta noastră și adăugăm un nou control denumit "GLargeMapControl".

Apoi, să adăugăm o funcție care să permită utilizatorilor să aleagă modul de hartă pe care îl doresc - Normal, Vizualizare satelit sau un hibrid.

 var c = nou GMapTypeControl (); // comuta modurile de hartă m.addControl (c);

• Creați o variabilă numită "c" și o faceți egală cu o nouă instanță a clasei "GMapTypeControl".
• Adăugați un nou control și introduceți "c".

Dacă reîmprospătați browserul dvs., veți vedea că utilizatorul nows are opțiunea de a alege modul său de vizionare. Dar dacă doriți să setați modul implicit? În astfel de cazuri, ați utiliza "setMapType".

 m.setMapType (G_SATELLITE_MAP);

Când definiți modul implicit, aveți trei opțiuni.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Ai terminat!

Nu a fost prea greu, nu? Există câteva nume specifice de clase pe care va trebui să le memorați sau să le notezi pentru o referință ulterioară. Dar, în afară de asta, este uimitor de simplu să implementați o astfel de hartă avansată pe site-urile dvs. web.

Pentru designerii de șabloane, de ce nu puneți acest lucru într-una dintre temele pe care le vindeți pe ThemeForest?

Cu câteva zile în urmă, am publicat un tutorial care vă arată cum să combinați mai multe API - inclusiv Google Maps. Dar mulți dintre voi nu știați suficient pentru a începe. Sperăm că acest lucru va ajuta. După ce vă înfășurați capul în jurul acestui API, de ce să nu vă salvați niște dureri de cap și să vă înscrieți ajutorul unei clase PHP numite Phoogle? Cred că e mai bine să înveți mai întâi calea cea bună, dar acum că ai ... tăiat niște colțuri! Ne vedem săptămâna viitoare.

Resurse suplimentare

• 

  Cum se creează un Mashup prin combinarea a 3 API-uri diferite

  Acest tutorial vă va arăta cum să creați o mashup de trei API-uri diferite, inclusiv integrarea cu Google Maps.

  Vizitați articolul

• Abonați-vă la fluxul RSS și feed-ul video pentru mai multe tutori și articole de zi cu zi de dezvoltare online.