Cum se adaugă o hartă Google pe o pagină web cu API

Pentru a insera o hartă Google cu un marker de locație în pagina dvs. web, va trebui să achiziționați o cheie software specială de la Google și apoi să adăugați codul JavaScript relevant în pagină. Deși procesul este simplu, vă ajută să aveți cunoștințe de bază despre HTML și JavaScript.

Obțineți o cheie API Google Maps

Pentru a proteja serverele sale de a fi bombardate de cereri de hărți și căutări de locație, Google restricționează 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:

Accesați Google Cloud Platform Console și, după ce v-ați conectat cu contul dvs. Google, fie creați un proiect nou, fie selectați unul existent.
Clic A continua pentru a activa API-ul și orice servicii conexe.
Pe scrisori de acreditare pagină, obțineți un Cheia API. Dacă este necesar, setați restricțiile relevante asupra cheii.
Securizați-vă cheia API folosind cele mai bune practici recomandate 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 bloguri cu trafic redus sau site-uri 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 BODY a documentului HTML:

// Inițializați și adăugați harta
funcția initMap () {
// Locația steagului
var flag = {lat: XXX, lng: YYY};
// Harta, centrată pe steag
var map = new google.maps.Map (
document.getElementById ('hartă'), {zoom: 4, center: flag});
// Marcatorul, poziționat la steag
var marker = new google.maps.Marker ({poziție: steag, hartă: hartă});
}