Dohvatite API ključ Google Karte za svoju web lokaciju
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
- Prijavite se Googleu pomoću Google računa.
- Idite na konzolu za razvojne programere
- Pomičite se kroz popis i pronađite API v3 za Google karte, a zatim kliknite gumb "ISKLJUČENO" da biste ga uključili.
- Pročitajte i prihvatite uvjete.
- Idite na API konzolu i odaberite "API pristup" s lijevog izbornika
- U odjeljku "Jednostavno API pristup" kliknite gumb "Stvori novi ključ poslužitelja …".
- 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.
- Kopirajte tekst na liniju "API ključ:" (ne uključujući taj naslov). Ovo je vaš API ključ za vaše karte.
Pretvori svoju adresu u koordinate
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.
- Idite na Geocoder.us i upišite svoju adresu u okvir za pretraživanje.
- Kopirajte prvi broj za zemljopisnu širinu (bez slova ispred) i zalijepite ga u tekstualnu datoteku. Ne trebate indikator stupnja (º).
- 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 SAD adrese, ako trebate dobiti koordinate u drugoj zemlji, trebali biste tražiti sličan alat u vašoj regiji.
03 od 05Dodavanje karte na vašu web stranicu
Prvo, dodajte skriptu karte na
vašeg dokumenta
Otvorite svoju web stranicu i dodajte sljedeće na GLAVA 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 GLAVA vašeg dokumenta, morate postaviti kartu na stranicu. To možete učiniti dodavanjem a DIV element s id = "karta-platno" atribut. 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 pomoću a TIJELO atribut:
oznake onload = "inicijalizira ()" >
Ostale stvari za provjeru ukoliko se vaša karta ne učitava uključuju:
- Potražite pogreške pri upisu u svoj JavaScript, uključujući slučaj. JavaScript je velika i mala slova.
- Pobrinite se da imate
zumicentarpostavljene opcije. - Pobrinite se da vaš
DIVelement je na stranici s točnim ID-om. - Pobrinite se da vaš
DIVelement ima visinu.
Dodajte oznaku na svoju kartu
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 na Google kartama, dodajte sljedeće u svoju skriptu ispod var map = … crta:
var myLatlng = novi google.maps.LatLng ( zemljopisna širina i duljina );var marker = novi google.maps.Marker ({pozicija: myLatlng,karta: karta,titula:" Bivši glavni grad '});
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 ({položaj: latlng 2 ,karta: karta,titula:" Apple Računalo '});
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 05Dodajte 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.
- Dohvatite zemljopisnu širinu i dužinu svih karata koje želite prikazati kako smo saznali u 2. koraku ovog vodiča.
- 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.
- Za drugu kartu morat ćete dodati 3 nove retke u datoteku za inicijalizaciju ():
var latlng2 = novi google.maps.LatLng ( druge koordinate );var myOptions2 = {zoom: 18, centar: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = novi google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - 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 ' }); - Zatim dodajte drugdje gdje želite drugu kartu. I svakako ga dati
id = "map_canvas_2"ISKAZNICA. - Kada se stranica učita, prikazat će se dvije karte
Evo kôda stranice s dvije Google karte na njemu:
