Čo treba vedieť
- Choďte do Konzola Google Cloud Platform a vytvorte alebo vyberte projekt a potom kliknite na ďalej. Na Poverovacie listiny stránku, získajte Kľúč API.
- Vložte JavaScriptový kód (zobrazený nižšie) do sekcie BODY v HTML dokumente.
- V záhlaví dokumentu HTML zadajte obmedzenia CSS pre mapu vrátane veľkosti, farieb a umiestnenia stránky.
Tento článok vysvetľuje, ako vložiť mapu Google so značkou polohy na svoju webovú stránku. Tento proces zahŕňa získanie špeciálneho softvérového kľúča od spoločnosti Google a následné pridanie príslušného kódu JavaScript na stránku.
Získajte kľúč API služby Mapy Google
Spoločnosť Google obmedzuje prístup do svojej databázy máp, aby chránila svoje servery pred bombardovaním požiadavkami na mapy a vyhľadávania miest. Musíte sa zaregistrovať v spoločnosti Google ako vývojár, aby ste získali jedinečný kľúč na použitie aplikačného programovacieho rozhrania na vyžiadanie údajov zo serverov služby Mapy. Kľúč API je zadarmo, pokiaľ nepotrebujete ťažký prístup k serverom spoločnosti Google (napríklad na vývoj webovej aplikácie).
Registrácia kľúča API:
Choďte do Konzola Google Cloud Platform a po prihlásení pomocou účtu Google vytvorte nový projekt alebo vyberte existujúci.
Kliknite ďalej na povolenie API a akýchkoľvek súvisiacich služieb.
Na Poverovacie listiny stránku, získajte Kľúč API. Podľa potreby nastavte príslušné obmedzenia na kľúči.
Zabezpečte svoj kľúč API pomocou osvedčené postupy odporúčané spoločnosťou Google.
Ak si myslíte, že budete musieť mapu zobrazovať častejšie, ako vám umožňuje vaša bezplatná kvóta, dohodnite si s Googlom dohodu o fakturácii. Je nepravdepodobné, že väčšina webových stránok, najmä blogy s nízkou návštevnosťou alebo špecializované stránky, spotrebuje veľkú časť pridelených kvót.
Vložte JavaScript do svojej webovej stránky
Vložte nasledujúci kód na svoju webovú stránku v sekcii TELO dokumentu HTML:
// Inicializácia a pridanie mapovej funkcie initMap () {
// Umiestnenie príznaku var flag = {lat: XXX, lng: YYY};
// Mapa so stredom na vlajke var map = new google.maps. Map (document.getElementById ('map'), {zoom: 4, center: flag});
// Značka umiestnená na vlajke var marker = new google.maps. Značka ({position: flag, map: map}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
V tomto kóde zmeňte nasledovné:
- Vymeniť vlajka s menom odkazujúcim na miesto, ktoré pripínate. Snažte sa, aby to bolo jednoduché a krátke (napríklad Domov alebo kancelária alebo paris alebo detroit). Tento kód môžete spustiť vlajka také, aké sú, ale zmena názvu podporuje opätovné použitie tohto kódu na tej istej stránke na vloženie niekoľkých rôznych máp.
- Vymeniť XXX a RRRR so zemepisnou šírkou a zemepisnou dĺžkou, v desatinných miestách, polohy značky značky na mape. Aby sa mapa mohla správne zobrazovať, musíte tieto hodnoty nahradiť. Jednoduchým spôsobom, ako zistiť zemepisnú šírku a dĺžku, je otvoriť Mapy Google a kliknúť pravým tlačidlom myši na presné miesto, ktoré chcete označiť. V kontextovej ponuke vyberte možnosť Čo je tu? pre zobrazenie zemepisnej šírky a dĺžky.
- Vymeniť YOUR_API_KEY pomocou kľúča API, ktorý ste získali od spoločnosti Google. Medzi znamienko rovnosti a ampersand nedávajte medzery. Bez kľúča dopyt zlyhá a mapa sa nebude zobrazovať správne.
Optimálne postupy
V záhlaví dokumentu HTML zadajte obmedzenia CSS pre mapu vrátane veľkosti, farieb a umiestnenia stránky.
Mapový skript Google obsahuje atribúty ako zväčšiť a centrum ktoré sú otvorené pre úpravy koncovým používateľom. Táto pokročilejšia technika je podporovaná v dokumentácii pre vývojárov spoločnosti Google.
Rozhranie API služby Mapy Google je cenným prínosom. Pokyny týkajúce sa osvedčených postupov spoločnosti Google poskytujú vynikajúce rady na zabezpečenie kľúča proti zneužitiu inými. Správne zabezpečenie je obzvlášť dôležité, ak ste nastavili platobný systém pre prístup k rozhraniu API, pretože v prípade odcudzenia vašich údajov by ste mohli čeliť strmému účtu. Konkrétne príklad, ktorý sme tu uviedli robí vložiť kľúč API priamo do kódu - urobili sme to kvôli demonštrácii postupu. V produkčnom prostredí je však lepšie zadať premenné prostredia pre kľúč namiesto priameho vloženia kľúča.