Ką reikia žinoti
- Eikite į „Google Cloud Platform Console“ ir sukurkite arba pasirinkite projektą, tada spustelėkite Tęsti. Ant Įgaliojimai puslapį, gaukite API raktas.
- Įterpkite „JavaScript“ kodą (parodyta žemiau) į HTML dokumento skyrių BODY.
- HTML dokumento galvutėje nurodykite CSS apribojimus žemėlapiui, įskaitant dydį, spalvas ir puslapio išdėstymą.
Šiame straipsnyje paaiškinta, kaip į savo tinklalapį įterpti „Google“ žemėlapį su vietos žymekliu. Šis procesas apima „Google“ specialaus programinės įrangos rakto gavimą ir atitinkamo „JavaScript“ pridėjimą prie puslapio.
Gaukite „Google Maps“ API raktą
Siekdama apsaugoti savo serverius nuo bombardavimo pateikiant žemėlapių ir vietų paieškos užklausas, „Google“ riboja prieigą prie savo Žemėlapių duomenų bazės. Turite užsiregistruoti „Google“ kaip kūrėjas, kad gautumėte unikalų raktą, kad galėtumėte naudoti Programų programavimo sąsają prašydami duomenų iš Žemėlapių serverių. API raktas yra nemokamas, nebent jums reikia didelės prieigos prie „Google“ serverių (pavyzdžiui, norint sukurti žiniatinklio programą).
Norėdami užregistruoti API raktą:
Eikite į „Google Cloud Platform Console“ ir, prisijungę prie „Google“ paskyros, sukurkite naują projektą arba pasirinkite esamą.
Spustelėkite Tęsti įgalinti API ir visas susijusias paslaugas.
Ant Įgaliojimai puslapį, gaukite API raktas. Jei reikia, nustatykite atitinkamus rakto apribojimus.
Apsaugokite savo API raktą naudodami geriausia praktika rekomendavo „Google“.
Jei manote, kad žemėlapį reikės rodyti dažniau, nei leidžia jūsų nemokama kvota, nustatykite atsiskaitymo susitarimą su „Google“. Vargu ar dauguma svetainių, ypač mažo srauto tinklaraščiai ar nišinės svetainės, neišnaudos daugybės kvotų.
Įterpkite „JavaScript“ į savo tinklalapį
Įterpkite šį kodą į savo tinklalapį HTML dokumento skyriuje KŪNAS:
// Inicijuokite ir pridėkite žemėlapio funkciją initMap () {
// Vėliavos var flag vieta = {lat: XXX, lng: YYY};
// Žemėlapis, sutelktas ties vėliavos var map = new google.maps. Žemėlapis (document.getElementById ('žemėlapis'), {mastelis: 4, centras: vėliava});
// Žymeklis, išdėstytas vėliavoje var marker = new google.maps. Žymeklis ({pozicija: vėliava, žemėlapis: žemėlapis}); } src = " https://maps.googleapis.com/maps/api/js? raktas = YOUR_API_KEY & callback = initMap ">
Šiame kode pakeiskite:
- Pakeiskite vėliava su vardu, nurodančiu jūsų smeigiamą vietą. Būkite paprastas ir trumpas (pvz., namai arba biuras arba Paryžius arba detroitas). Šį kodą galite paleisti palikdami vėliava toks, koks yra, tačiau pakeitus pavadinimą galima pakartotinai naudoti šį kodą tame pačiame puslapyje, kad būtų galima įdėti kelis skirtingus žemėlapius.
- Pakeiskite XXX ir YYY su žemėlapio žymeklio vietos platuma ir ilguma dešimtainiais ženklais. Kad žemėlapis būtų tinkamai rodomas, turite pakeisti šias vertes. Paprastas būdas rasti platumą ir ilgumą yra atidaryti „Google Maps“ ir dešiniuoju pelės mygtuku spustelėkite tikslią vietą, kurią ketinate pažymėti. Kontekstiniame meniu pasirinkite Kas čia? norėdami pamatyti platumą ir ilgumą.
- Pakeiskite YOUR_API_KEY naudodami API raktą, kurį gavote iš „Google“. Nedėkite tarpų tarp lygybės ženklo ir ampersando. Be rakto užklausa nepavyks ir žemėlapis nebus tinkamai rodomas.
Optimali praktika
HTML dokumento galvutėje nurodykite CSS apribojimus žemėlapiui, įskaitant dydį, spalvas ir puslapio išdėstymą.
„Google“ žemėlapio scenarijuje yra tokių atributų kaip priartinti ir centre kurias galima keisti galutiniams vartotojams. Ši pažangesnė technika palaikoma „Google“ kūrėjų dokumentuose.
„Google Maps“ API yra vertingas turtas. „Google“ geriausios praktikos instrukcijose pateikiami puikūs patarimai, kaip apsaugoti raktą nuo kitų netinkamo naudojimo. Tinkamas saugumas yra ypač aktualus, jei sukūrėte mokėjimo prieigą prie API sistemą, nes pavogus jūsų kredencialus galite susidurti su didele sąskaita. Visų pirma, pavyzdys, kurį parodėme čia daro įterpkite API raktą tiesiai į kodą - tai padarėme norėdami parodyti procedūrą. Tačiau gamybos aplinkoje geriau nurodyti rakto aplinkos kintamuosius, o ne tiesiogiai įterpti raktą.