Cativa pasi simpli pentru a adauga harta Google Maps pe site-ul dvs.

Incepeti prin a creea un cont Google daca nu aveti unul. Acest lucru este necesar pentru a obtine o cheie API Javascript de la Google. Aceasta cheie o vom folosi in codul HTML al site-ului. Conectati-va la “Google Developer Console“.

Pasul 1

Creati un proiect. Click pe “Select a project” care se afla in bara de sus, din dreptul siglei “Google API”.

Pasul 2

Click semnul (+) din partea dreapta a ferestrei pop-up.

Pasul 3

Alegeti un nume pentru acest proiect apoi click “Create”. Proiectul este acum gata.

Pasul 4

Avem nevoie de cheia API Javascript asa ca va trebui sa o gasim la rubrica Library. Aceasta se gaseste in partea stanga a ecranului sub “dashboard”.

Pasul 5

“Google Maps Javascript API” trebuie sa apara in fata. Daca nu a aparut, puteti sa folositi motorul de cautare din bara de sus.

Pasul 6

Selectati “Google Maps Javascript API” si activati-l (click Enable).

Pasul 7

Urmatorul lucru este stabilirea “Credentials” si in asa fel gasim cheia API. Sunt cateva moduri in care puteti face asta. Puteti creea credentials din warning box-ul de pe dashboard. Sau

puteti sa selectati Credentials din partea stanga a barei de meniu. Utilizam aceasta metoda.

Pasul 8

Dupa ce ati accesat tab-ul “Credentials” veti vedea butonul “Create Credentials”. Click pe acesta si va aparea o fereastra pop-up de unde se selecteaza “API Key”.

Pasul 9

Click pe “API Key” si acesta va aparea. Ar trebui sa arate ca in imaginea de mai jos.

Pasul 10

In mare parte suntem gata. Acum mai trebuie sa adaugati “API Key-ul” in site-ul dvs. Codul JavaScript este acesta:

“YOUR_KEY” trebuie inlocuit cu cheia dvs API de mai sus. Aveti mai jos un exemplu cu un cod HTML pentru a intelege mai bine. Exista un string center:new google.maps.LatLng(23.792750,90.407606) unde trebuie sa inlocuiti coordonatele din paranteza cu coordonatele zonei dorite. Puteti obtine cu usurinta aceste coordonate din Google Maps. Click dreapta mouse pe pozitia dorita din harta si click “What’s here”. Latitudinea si longitudinea vor fi afisate, separate prin virgula. Copiati aceste coordonate.

<!DOCTYPE html>
<html>
<body>

<h1>My Google Map</h1>

<div id="gMap" style="width:100%;height:500px;"></div>

<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(23.792750,90.407606),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

</body>
</html>

Web DesignBrasov

Cum adaug harta Google Maps in site?