Jak přidat Google Map na webovou stránku s API

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:

  1. Přejděte do konzoly Google Cloud Platform a po přihlášení pomocí účtu Google vytvořte nový projekt nebo vyberte existující.

  2. klikněte Pokračovat k povolení API a všech souvisejících služeb.

  3. Na pověřovací listiny stránku, získejte Klíč API. Podle potřeby nastavte příslušná omezení klíče.

  4. 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">