Chcete-li na svou webovou stránku vložit mapu Google se značkou umístění, musíte si od společnosti Google pořídit speciální softwarový klíč a poté na stránku přidat příslušný JavaScript. I když je tento proces přímočarý, pomáhá mít alespoň povrchní znalost HTML a JavaScriptu.
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řejděte do konzoly Google Cloud Platform a po přihlášení pomocí účtu Google vytvořte nový projekt nebo vyberte existující.
-
klikněte Pokračovat k povolení API a všech souvisejících služeb.
-
Na pověřovací listiny 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ých postupů doporučených společností Google.
Pokud se domníváte, že budete muset mapu zobrazovat častěji, než vám povoluje bezplatná kvóta, připravte si u Googlu dohodu o fakturaci. Je nepravděpodobné, že většina webů - zejména blogy s nízkým provozem nebo specializované weby - spotřebuje velkou část alokace 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:
<div id = "map"> </div>
<script>
// Inicializujte a přidejte mapu
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 ('mapa'), {zvětšení: 4, střed: vlajka});
// Značka umístěná na vlajce
var marker = new google.maps.Marker ({pozice: vlajka, mapa: mapa});
}
</ Script>
<odložení asynchronního skriptu
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">