Kaj vedeti
- Pojdi na Google Cloud Platform Console in ustvarite ali izberite projekt, nato kliknite Nadaljujte. Na Poverilnice strani, dobite API ključ.
- V razdelek BODY dokumenta HTML vstavite kodo JavaScript (prikazano spodaj).
- V glavi dokumenta HTML določite omejitve CSS za zemljevid, vključno z velikostjo, barvami in umestitvijo strani.
V tem članku je razloženo, kako na spletno stran vstavite Googlov zemljevid z oznako lokacije. Ta postopek vključuje pridobivanje posebnega programskega ključa od Googla in nato dodajanje ustreznega JavaScript-a na stran.
Pridobite ključ API-ja Google Maps
Da bi svoje strežnike zaščitil pred bombardiranjem zaradi zahtev po zemljevidih in iskanju lokacij, Google omejuje dostop do svoje zbirke podatkov Zemljevidov. Za pridobitev edinstvenega ključa za uporabo vmesnika za programiranje aplikacij za zahtevo podatkov iz strežnikov Zemljevidov se morate registrirati pri Googlu kot razvijalec. Ključ API je brezplačen, razen če potrebujete močan dostop do Googlovih strežnikov (na primer za razvoj spletne aplikacije).
Če želite registrirati svoj ključ API:
Pojdi na Google Cloud Platform Console in po prijavi z Google Računom ustvarite nov projekt ali izberite obstoječega.
Kliknite Nadaljujte da omogočite API in vse povezane storitve.
Na Poverilnice strani, dobite API ključ. Po potrebi nastavite ustrezne omejitve za ključ.
Zaščitite svoj ključ API z uporabo Najboljše prakse priporoča Google.
Če menite, da boste morali zemljevid prikazovati pogosteje, kot vam omogoča brezplačna kvota, z Googlom nastavite obračun. Večina spletnih mest, zlasti blogov z nizkim prometom ali spletnih mest z nišami, verjetno ne bo porabila večine dodeljenih kvot.
Vstavite JavaScript na svojo spletno stran
V svojo spletno stran v odsek BODY dokumenta HTML vstavite naslednjo kodo:
// Inicializiramo in dodamo funkcijo zemljevida initMap () {
// Lokacija zastave var flag = {lat: XXX, lng: LLL};
// Zemljevid s središčem na zastavi var map = new google.maps. Zemljevid (document.getElementById ('map'), {zoom: 4, center: flag});
// Oznaka, postavljena na zastavico var marker = new google.maps. Označevalnik ({položaj: zastava, zemljevid: zemljevid}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
V tej kodi spremenite naslednje:
- Zamenjati zastavo z imenom, ki se sklicuje na lokacijo, ki jo pripnete. Naj bo preprosto in kratko (na primer domov ali pisarni ali paris ali detroit). To kodo lahko zaženete ob odhodu zastavo takšen kot je, vendar sprememba imena podpira ponovno uporabo te kode na isti strani za vdelavo več različnih zemljevidov.
- Zamenjati XXX in YYY z zemljepisno širino in dolžino, v decimalnih mestih, lokacije označevalnika zemljevida. Te vrednosti morate zamenjati, da se zemljevid pravilno prikaže. Zemljepisno širino in dolžino najlažje najdete tako, da odprete Google Zemljevide in z desno miškino tipko kliknete natančno lokacijo, ki jo želite označiti. V priročnem meniju izberite Kaj je tukaj?, da si ogledate zemljepisno širino in dolžino.
- Zamenjati YOUR_API_KEY s ključem API, ki ste ga dobili od Googla. Ne postavljajte presledkov med znakom enakosti in znakom &. Brez ključa poizvedba ne bo uspela in zemljevid se ne bo prikazal pravilno.
Optimalne prakse
V glavi dokumenta HTML določite omejitve CSS za zemljevid, vključno z velikostjo, barvami in umestitvijo strani.
Googlov skript zemljevida vsebuje atribute, kot so povečava in center ki so odprti za končne uporabnike. Ta naprednejša tehnika je podprta z Googlovo dokumentacijo za razvijalce.
API Google Maps je dragoceno sredstvo. Googlova navodila za najboljšo prakso ponujajo odlične nasvete za zaščito ključa pred zlorabo drugih. Ustrezna varnost je še posebej pomembna, če ste za dostop do API-jev vzpostavili plačilni sistem, saj se vam lahko ukradejo poverilnice. Zlasti primer, ki smo ga prikazali tukaj naredi vdelajte ključ API neposredno v kodo - to smo storili za predstavitev postopka. V produkcijskem okolju pa je bolje, da za ključ določite spremenljivke okolja, namesto da ga vstavite neposredno.