Co je třeba vědět
- Přejít na Konzole Google Cloud Platform a vytvořte nebo vyberte projekt a klikněte na Pokračovat. Na Pověření stránku, získejte Klíč API.
- Vložte kód JavaScript (zobrazený níže) do části BODY dokumentu HTML.
- V záhlaví dokumentu HTML zadejte omezení CSS pro mapu, včetně velikosti, barev a umístění stránky.
Tento článek vysvětluje, jak na webovou stránku vložit mapu Google se značkou polohy. Tento proces zahrnuje získání speciálního softwarového klíče od Google a následné přidání příslušného JavaScriptu na stránku.
Získejte klíč API Google Maps
Aby Google ochránil své servery před bombardováním požadavky na mapy a vyhledávání polohy, omezuje přístup do své databáze Map. Musíte se zaregistrovat u společnosti Google jako vývojář, abyste získali jedinečný klíč pro použití aplikačního programovacího rozhraní k vyžádání dat ze serverů Map. Klíč API je zdarma, pokud nepotřebujete těžký přístup k serverům Google (například k vývoji webové aplikace).
Registrace klíče API:
Přejít na
Konzole Google Cloud Platform a po přihlášení pomocí účtu Google buď vytvořte nový projekt, nebo vyberte existující.Klepněte na Pokračovat k povolení API a všech souvisejících služeb.
Na Pověření stránku, získejte Klíč API. Podle potřeby nastavte příslušná omezení klíče.
Zabezpečte svůj klíč API pomocí osvědčené postupy doporučeno společností Google.
Pokud se domníváte, že budete muset mapu zobrazovat častěji, než vám povoluje bezplatná kvóta, sjednejte si u Googlu fakturační ujednání. Je nepravděpodobné, že většina webů, zejména blogy s nízkým provozem nebo specializované weby, spotřebuje velkou část přidělení kvót.
Vložte JavaScript do své webové stránky
Vložte následující kód na svou webovou stránku v části BODY dokumentu HTML:
// Inicializace a přidání mapové funkce initMap () {
// Umístění vlajky var flag = {lat: XXX, lng: YYY};
// Mapa se středem na vlajce var map = new google.maps. Map (document.getElementById ('map'), {zoom: 4, center: flag});
// Značka umístěná na vlajce var marker = new google.maps. Značka ({pozice: vlajka, mapa: mapa}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
V tomto kódu změňte následující:
- Nahradit vlajka s názvem, který odkazuje na místo, které připínáte. Udržujte to jednoduché a krátké (jako Domov nebo kancelář nebo Paříž nebo Detroit). Tento kód můžete spustit opuštění vlajka jak je, ale změna názvu podporuje opětovné použití tohoto kódu na stejné stránce pro vložení několika různých map.
- Nahradit XXX a YYY se zeměpisnou šířkou a délkou polohy značky mapy v desítkových číslech. Aby se mapa správně zobrazila, musíte tyto hodnoty nahradit. Snadný způsob, jak zjistit zeměpisnou šířku a délku, je otevřít Mapy Google a kliknout pravým tlačítkem na přesné místo, které chcete označit. V místní nabídce vyberte Co je tady? pro zobrazení zeměpisné šířky a délky.
- Nahradit YOUR_API_KEY s klíčem API, který jste získali od Google. Mezi znaménko rovná se a ampersand nedávejte mezery. Bez klíče dotaz selže a mapa se nebude zobrazovat správně.
Optimální postupy
V záhlaví dokumentu HTML zadejte omezení CSS pro mapu, včetně velikosti, barev a umístění stránky.
Mapový skript Google obsahuje atributy jako Zvětšení a centrum které jsou otevřené úpravám koncových uživatelů. Tato pokročilejší technika je podporována v dokumentaci pro vývojáře Google.
API Google Maps je cenným aktivem. Pokyny k osvědčeným postupům Google nabízejí vynikající rady pro zabezpečení klíče proti zneužití ostatními. Správné zabezpečení je obzvláště důležité, pokud jste nastavili platební systém pro přístup k API, protože v případě odcizení vašich přihlašovacích údajů můžete čelit strmému účtu. Zejména příklad, který jsme zde ukázali dělá vložte klíč API přímo do kódu - provedli jsme to za účelem předvedení postupu. V produkčním prostředí je však lepší zadat proměnné prostředí pro klíč namísto přímého vložení klíče.