Ce să știi
- Du-te la Consola Google Cloud Platform și creați sau selectați un proiect, apoi faceți clic pe Continua. Pe Acreditări pagină, obțineți un Cheie API.
- Introduceți codul JavaScript (prezentat mai jos) în secțiunea CORP din documentul HTML.
- În capul documentului HTML, specificați constrângerile CSS pentru hartă, inclusiv dimensionarea, culorile și plasarea paginii.
Acest articol explică cum să inserați o hartă Google cu un marker de locație în pagina dvs. web. Acest proces include obținerea unei chei software speciale de la Google și apoi adăugarea codului JavaScript relevant la pagină.
Obțineți o cheie API Google Maps
Pentru a-și proteja serverele de a fi bombardate de cereri de hărți și căutări de locație, Google restrânge accesul la baza de date Maps. Trebuie să vă înregistrați la Google ca dezvoltator pentru a obține o cheie unică pentru a utiliza interfața de programare a aplicațiilor pentru a solicita date de la serverele Maps. Cheia API este gratuită, cu excepția cazului în care aveți nevoie de acces intens la serverele Google (de exemplu, pentru a dezvolta o aplicație web).
Pentru a vă înregistra cheia API:
Du-te la Consola Google Cloud Platform și, după ce v-ați conectat cu contul dvs. Google, fie creați un proiect nou, fie selectați unul existent.
Clic Continua pentru a activa API-ul și orice servicii conexe.
Pe Acreditări pagină, obțineți un Cheie API. Dacă este necesar, setați restricțiile relevante asupra cheii.
Securizați cheia API folosind cele mai bune practici recomandat de Google.
Dacă credeți că va trebui să afișați harta mai des decât vă permite cota gratuită, configurați un acord de facturare cu Google. Este puțin probabil ca majoritatea site-urilor web, în special a blogurilor cu trafic redus sau a site-urilor de nișă, să consume o mare parte din alocarea cotelor.
Introduceți JavaScript în pagina dvs. web
Introduceți următorul cod în pagina dvs. Web, în secțiunea CORP din documentul HTML:
// Inițializați și adăugați funcția de hartă initMap () {
// Locația steagului var flag = {lat: XXX, lng: YYY};
// Harta, centrată la pavilion var map = new google.maps. Hartă (document.getElementById ('hartă'), {zoom: 4, centru: pavilion});
// Marcatorul, poziționat la marcatorul var marker = new google.maps. Marker ({poziție: steag, hartă: hartă}); } src = " https://maps.googleapis.com/maps/api/js? cheie = YOUR_API_KEY & callback = initMap ">
În acest cod, modificați următoarele:
- A inlocui steag cu un nume care face referire la locația pe care o fixați. Păstrați-l simplu și scurt (cum ar fi Acasă sau birou sau Paris sau Detroit). Puteți rula acest cod plecând steag așa cum este, dar schimbarea numelui acceptă reutilizarea acestui cod pe aceeași pagină, pentru a încorpora mai multe hărți diferite.
- A inlocui XXX și AAAA cu latitudinea și longitudinea, în zecimale, a locației marcatorului hărții. Trebuie să înlocuiți aceste valori pentru ca harta să fie afișată corect. O modalitate ușoară de a găsi latitudinea și longitudinea este să deschideți Google Maps și să faceți clic dreapta pe locația exactă pe care intenționați să o marcați. În meniul contextual, selectați Ce este aici? pentru a vizualiza latitudinea și longitudinea.
- A inlocui YOUR_API_KEY cu cheia API pe care ați obținut-o de la Google. Nu puneți spații între semnul egal și semnul negru. Fără cheie, interogarea va eșua și harta nu se va afișa corect.
Practici optime
În capul documentului HTML, specificați constrângerile CSS pentru hartă, inclusiv dimensionarea, culorile și plasarea paginii.
Scriptul de hartă Google conține atribute precum zoom și centru care sunt deschise modificării utilizatorului final. Această tehnică mai avansată este acceptată prin documentația Google pentru dezvoltatori.
Un API Google Maps este un atu valoros. Instrucțiunile cele mai bune practici Google oferă sfaturi excelente pentru securizarea cheii împotriva utilizării necorespunzătoare de către alții. Securitatea adecvată este deosebit de relevantă dacă ați configurat un sistem de plată pentru acces API, deoarece ați putea face față unei facturi abrupte dacă vă sunt furate acreditările. În special, exemplul pe care l-am arătat aici face încorporați cheia API direct în cod - am făcut acest lucru pentru a demonstra procedura. Cu toate acestea, într-un mediu de producție, este mai bine să specificați variabilele de mediu pentru cheie în loc să introduceți cheia direct.