Kako dodati Google Map na svoju web stranicu

01 od 05

Dohvatite API ključ Google Karte za svoju web lokaciju

Pogled u oblaku na Google Developers Console. Zaslon snimljen od strane J Kyrnina

Korištenje API-ja Google karata najbolji je način za dodavanje Google karte na vašu web stranicu. A Google preporučuje da dobijete API ključ kako biste mogli koristiti karte.

Nije vam potreban API ključ za upotrebu aplikacije Google Maps API v3, no vrlo je korisno jer vam omogućuje praćenje upotrebe i plaćanje dodatnog pristupa. API v3 Google karata ima kvotu od 1 zahtjeva u sekundi po korisniku do najviše 25.000 zahtjeva dnevno. Ako vaše stranice premašuju ta ograničenja, morat ćete omogućiti naplatu kako biste dobili više.

Kako dobiti ključni API za Google karte

  1. Prijavite se Googleu pomoću Google računa.
  2. Idite na konzolu za razvojne programere
  3. Pomičite se kroz popis i pronađite API v3 za Google karte, a zatim kliknite gumb "ISKLJUČENO" da biste ga uključili.
  4. Pročitajte i prihvatite uvjete.
  5. Idite na API konzolu i odaberite "API pristup" s lijevog izbornika
  6. U odjeljku "Jednostavno API pristup" kliknite gumb "Stvori novi ključ poslužitelja ...".
  7. Unesite IP adresu vašeg web poslužitelja. Ovo je IP adresa na kojoj dolaze vaši zahtjevi za Karte. Ako ne znate svoju IP adresu, možete ga pogledati.
  8. Kopirajte tekst na liniju "API ključ:" (ne uključujući taj naslov). Ovo je vaš API ključ za vaše karte.

02 od 05

Pretvori svoju adresu u koordinate

Upotrijebite označene brojeve za zemljopisnu širinu i dužinu. Zaslon snimljen od strane J Kyrnina

Da biste Google karte koristili na svojim web stranicama, trebate imati geografsku širinu i dužinu za lokaciju. Možete ih dobiti s GPS-a ili možete koristiti online alat poput Geocoder.us da vam kažem.

  1. Idite na Geocoder.us i upišite svoju adresu u okvir za pretraživanje.
  2. Kopirajte prvi broj za zemljopisnu širinu (bez slova ispred) i zalijepite ga u tekstualnu datoteku. Ne trebate indikator stupnja (º).
  3. Kopirajte prvi broj za duljinu (opet bez slova ispred) i zalijepite ga u tekstualnu datoteku.

Vaša zemljopisna širina i dužina izgledat će ovako:

40.756076
-73,990838

Geocoder.us radi samo za američke adrese, ako trebate dobiti koordinate u drugoj zemlji, trebali biste tražiti sličan alat u vašoj regiji.

03 od 05

Dodavanje karte na vašu web stranicu

Google Karte. Zaslon snimljen od strane J Kyrnina - Slika karte Google ljubazno

Prvo, dodajte skriptu karte na

vašeg dokumenta

Otvorite svoju web stranicu i dodajte sljedeće u HEAD vašeg dokumenta.

Izmijenite označeni dio brojevima zemljopisne širine i dužine koje ste zapisali u drugom koraku.

Drugo, dodajte element karte na svoju stranicu

Nakon što dodate sve elemente skripte u HEAD dokumenta, morate postaviti kartu na stranicu. To možete učiniti dodavanjem DIV elementa s atributom id = "map-canvas". Preporučujem vam i stil divova sa širinom i visinom koji će stati na vašu stranicu:

Konačno, prijenos i test

Posljednja stvar koju trebate učiniti jest prenijeti stranicu i provjeriti prikazuje li se vaša karta. Evo primjera Google karte na stranici. Imajte na umu da zbog načina funkcioniranja usluge About.com CMS morat ćete kliknuti na vezu kako bi se prikazala karta. To neće biti slučaj na vašoj stranici.

Ako se karta ne prikaže, pokušajte ga inicijalizirati s atributom BODY:

onload = "inicijaliziraj ()" >

Ostale stvari za provjeru ukoliko se vaša karta ne učitava uključuju:

04 od 05

Dodajte oznaku na svoju kartu

Google karta s oznakom. Zaslon snimljen od strane J Kyrnina - Slika karte Google ljubazno

No, ono što je dobro karta vaše lokacije ako nema znakova koji govore ljudima gdje trebaju ići?

Da biste dodali standardni crveni marker za Google karte, dodajte sljedeću skriptu ispod var map = ... redak:

var myLatlng = novi google.maps.LatLng ( zemljopisna širina, dužina );
var marker = novi google.maps.Marker ({
pozicija: myLatlng,
karta: karta,
naslov: " Bivši srijeda "
});

Izmijenite označeni tekst na svoju zemljopisnu širinu i dužinu i naslov koji želite da se prikaže kada ljudi pređu preko oznake.

Možete dodati što više oznaka na stranicu po želji, samo dodajte nove varijable novim koordinatama i naslovima, ali ako je karta premalena za prikaz svih oznaka, one se neće prikazivati ​​osim ako se čitač ne zanemari.

var latlng 2 = novi google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = novi google.maps.Marker ({
pozicija: latlng 2 ,
karta: karta,
naslov: " Apple Computer "
});

Evo primjera Google karte s oznakom. Napominjemo, zbog načina funkcioniranja CMS-a, morate kliknuti vezu kako bi se karta prikazala. To neće biti slučaj na vašoj stranici.

05 od 05

Dodajte drugu (ili više) kartu na svoju stranicu

Ako ste pogledali moj primjer Google karte, vidjet ćete da imam više od jedne karte prikazane na stranici. Ovo je vrlo lako za napraviti. Evo kako.

  1. Dohvatite zemljopisnu širinu i dužinu svih karata koje želite prikazati kako smo saznali u 2. koraku ovog vodiča.
  2. Umetnite prvu kartu kao što smo naučili u 3. koraku ovog vodiča. Ako želite da karta ima oznaku, dodajte oznaku kao u koraku 4.
  3. Za drugu kartu morat ćete dodati 3 nove retke u datoteku za inicijalizaciju ():
    var latlng2 = novi google.maps.LatLng ( druga koordinata );
    var myOptions2 = {zoom: 18, centar: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map2 = novi google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
  4. Ako želite i marker na novoj karti, dodajte drugi marker koji pokazuje drugu koordinatu i drugu kartu:
    var myMarker2 = novi google.maps.Marker ({pozicija: latlng2 , karta: map2 , naslov: " Vaša oznaka "});
  5. Zatim dodajte drugu

    gdje želite drugu kartu. I svakako joj dajte id = "map_canvas_2" ID.

  6. Kada se stranica učita, prikazat će se dvije karte

Evo kôda stranice s dvije Google karte na njemu: