Što znati
- Idite na Konzola Google Cloud Platform i stvorite ili odaberite projekt, a zatim kliknite Nastaviti. Na Vjerodajnice stranicu, nabavite API ključ.
- Umetnite JavaScript kod (prikazan dolje) u odjeljak TIJELO HTML dokumenta.
- U glavi HTML dokumenta navedite CSS ograničenja za kartu, uključujući veličinu, boje i položaj stranice.
Ovaj članak objašnjava kako umetnuti Google kartu s oznakom lokacije na svoju web stranicu. Ovaj postupak uključuje dobivanje posebnog softverskog ključa od Googlea, a zatim dodavanje relevantnog JavaScript-a na stranicu.
Nabavite API ključ Google Mapsa
Da bi zaštitio svoje poslužitelje od bombardiranja zahtjevima za kartama i pretraživanjima lokacije, Google ograničava pristup svojoj bazi podataka Karti. Morate se registrirati na Googleu kao programer da biste dobili jedinstveni ključ za korištenje sučelja za programiranje aplikacija za traženje podataka s poslužitelja Maps. API ključ je besplatan, osim ako vam je potreban teški pristup Googleovim poslužiteljima (na primjer, za razvoj web aplikacije).
Da biste registrirali svoj API ključ:
Idite na Konzola Google Cloud Platform i nakon prijave s Google računom izradite novi projekt ili odaberite postojeći.
Klik Nastaviti kako bi se omogućio API i sve povezane usluge.
Na Vjerodajnice stranicu, nabavite API ključ. Prema potrebi postavite relevantna ograničenja na tipku.
Osigurajte svoj API ključ pomoću najbolje prakse preporučio Google.
Ako smatrate da će karta trebati biti prikazana češće nego što vam dopušta besplatna kvota, postavite aranžman za naplatu s Googleom. Većina web stranica, posebno blogova s malim prometom ili web mjesta s nišama, vjerojatno neće potrošiti velik dio dodjele kvota.
Umetnite JavaScript u svoju web stranicu
Umetnite sljedeći kod u svoju web stranicu, u odjeljku TIJELO HTML dokumenta:
// Inicijalizirajte i dodajte funkciju karte initMap () {
// Mjesto zastave var flag = {lat: XXX, lng: YYY};
// Karta, usredotočena na flag var map = new google.maps. Karta (document.getElementById ('karta'), {zum: 4, središte: zastava});
// Oznaka, smještena na zastavi var marker = new google.maps. Oznaka ({pozicija: zastava, karta: karta}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
U ovom kodu promijenite sljedeće:
- Zamijeniti zastava s imenom koje upućuje na mjesto koje ste prikvačili. Neka bude jednostavan i kratak (poput Dom ili ured ili Pariz ili Detroit). Možete pokrenuti ovaj kôd odlazeći zastava takvo kakvo jest, ali promjena imena podržava ponovnu upotrebu ovog koda na istoj stranici za ugrađivanje nekoliko različitih karata.
- Zamijeniti XXX i YYY sa zemljopisnom širinom i dužinom, u decimalnim brojevima, mjesta oznake karte. Morate zamijeniti ove vrijednosti da bi se karta pravilno prikazala. Zemljopisna širina i dužina je jednostavan način da otvorite Google Maps i desnom tipkom miša kliknite točno mjesto koje namjeravate označiti. U kontekstnom izborniku odaberite Što je ovdje? za prikaz zemljopisne širine i dužine.
- Zamijeniti YOUR_API_KEY s API ključem koji ste dobili od Googlea. Ne stavljajte razmake između znaka jednakosti i znaka ampersanda. Bez ključa upit neće uspjeti i karta se neće pravilno prikazati.
Optimalne prakse
U glavi HTML dokumenta navedite CSS ograničenja za kartu, uključujući veličinu, boje i položaj stranice.
Googleova skripta mape sadrži atribute poput zum i centar koji su otvoreni za izmjene krajnjeg korisnika. Ova naprednija tehnika podržana je kroz Googleovu dokumentaciju za programere.
API Google Maps dragocjena je imovina. Googleove upute za najbolju praksu nude izvrsne savjete za zaštitu ključa od zlouporabe od strane drugih. Odgovarajuća sigurnost posebno je važna ako ste postavili sustav plaćanja za pristup API-ju, jer biste se mogli suočiti sa velikim računom ako vam ukradu vjerodajnice. Konkretno, primjer koji smo ovdje prikazali čini ugraditi API ključ izravno u kôd - to smo učinili u svrhu demonstracije postupka. Međutim, u proizvodnom okruženju bolje je navesti varijable okruženja za ključ, umjesto da ga izravno umetnete.