Mida teada
- Mine Google Cloud Platformi konsool ja looge või valige projekt, seejärel klõpsake nuppu Jätka. On Volikirjad leht, hankige API võti.
- Sisestage JavaScripti kood (näidatud allpool) HTML-dokumendi jaotisse KEHA.
- Määrake HTML-dokumendi peas kaardi CSS-piirangud, sealhulgas suuruse, värvide ja lehe paigutuse.
Selles artiklis selgitatakse, kuidas sisestada oma veebisaidile asukohamärgiga Google'i kaart. See protsess hõlmab Google'ilt spetsiaalse tarkvaravõtme hankimist ja seejärel asjakohase JavaScripti lisamist lehele.
Hankige Google Mapsi API võti
Et kaitsta oma servereid kaartide ja asukohaotsingute taotluste pommitamise eest, piirab Google juurdepääsu oma Mapsi andmebaasile. Peate registreeruma Google'is arendajana, et saada ainulaadne võti, et kasutada rakenduste programmeerimisliidest Mapsi serveritelt andmete küsimiseks. API-võti on tasuta, välja arvatud juhul, kui vajate tugevat juurdepääsu Google'i serveritele (näiteks veebirakenduse arendamiseks).
API-võtme registreerimiseks toimige järgmiselt.
Mine Google Cloud Platformi konsool ja pärast oma Google'i kontoga sisselogimist looge kas uus projekt või valige olemasolev.
Klõpsake nuppu Jätka API ja kõigi sellega seotud teenuste lubamiseks.
On Volikirjad leht, hankige API võti. Vajadusel määrake võtmele asjakohased piirangud.
Kinnitage oma API võti, kasutades parimad tavad soovitas Google.
Kui arvate, et peate kaarti kuvama sagedamini, kui teie tasuta kvoot lubab, seadistage Google'iga arvelduskokkulepe. Enamik veebisaite, eriti vähese liiklusega ajaveebid või nišisaidid, ei tarbi tõenäoliselt suurt osa kvootide eraldamisest.
Sisestage JavaScripti oma veebilehele
Sisestage järgmine kood oma veebisaidile HTML-dokumendi jaotisse KEHA:
// Kaardifunktsiooni initMap () lisamine ja lisamine
// lipu var flag asukoht = {lat: XXX, lng: YYY};
// Kaart, mille keskpunkt on lipp var map = new google.maps. Kaart (document.getElementById ('kaart'), {suum: 4, keskel: lipp});
// Marker, mis asub lipul var marker = new google.maps. Marker ({asukoht: lipp, kaart: kaart}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
Selles koodis muutke järgmist:
- Asenda lipp nimega, mis viitab teie kinnitatavale asukohale. Hoidke see lihtne ja lühike (näiteks Kodu või kontoris või Pariis või detroit). Selle koodi saate käivitada lipp nagu on, kuid nime muutmine toetab selle koodi korduvkasutamist samal lehel mitme erineva kaardi kinnistamiseks.
- Asenda XXX ja AAAA kaardi markeri asukoha laius- ja pikkuskraad kümnendkohtadega. Kaardi õigeks kuvamiseks peate need väärtused asendama. Lihtne viis laius- ja pikkuskraadi leidmiseks on avada Google Maps ja paremklõpsata täpsel asukohal, mille kavatsete märgistada. Valige kontekstimenüüs Mis siin on? laius- ja pikkuskraadi vaatamiseks.
- Asenda YOUR_API_KEY Google'ilt saadud API-võtmega. Ärge pange tühikute võrdusmärgi ja tähemärgi vahele. Ilma võtmeta nurjub päring ja kaarti ei kuvata õigesti.
Optimaalsed tavad
Määrake oma HTML-dokumendi peas kaardi CSS-i piirangud, sealhulgas suurus, värvid ja lehe paigutus.
Google'i kaardiskript sisaldab selliseid atribuute nagu suum ja Keskus mis on avatud lõppkasutaja muudatustele. Seda täpsemat tehnikat toetab Google'i arendaja dokumentatsioon.
Google Mapsi API on väärtuslik vara. Google'i parimate tavade juhised pakuvad suurepäraseid nõuandeid võtme kindlustamiseks teiste väärkasutuse eest. Korralik turvalisus on eriti asjakohane, kui olete API-le juurdepääsuks maksesüsteemi seadistanud, kuna teie volituste varguse korral võib teil tekkida järsk arve. Eriti näide, mida oleme siin näidanud teeb embed API võti otse koodi - me oleme seda teinud protseduuri demonstreerimise eesmärgil. Tootmiskeskkonnas on parem aga võtme otse sisestamise asemel määrata võtmele keskkonnamuutujad.