Hogyan adhat hozzá Google térképet egy weboldalhoz API-val

Ha egy helyjelzővel ellátott Google térképet szeretne beilleszteni a weboldalába, beszereznie kell egy speciális szoftverkulcsot a Google-tól, majd hozzá kell adnia a megfelelő JavaScript-et az oldalhoz. Bár a folyamat egyszerű, segít legalább felületes HTML és JavaScript háttérismeretekben.

Szerezzen be egy Google Maps API-kulcsot

Annak érdekében, hogy megvédje szervereit attól, hogy térképekkel és helykereséssel kapcsolatos kérések bombázzák, a Google korlátozza a hozzáférést a Maps adatbázisához. Regisztrálnia kell a Google-nál fejlesztőként, hogy egyedi kulcsot kapjon az Alkalmazás-programozási felület használatához, hogy adatokat kérjen a Maps szerverekről. Az API kulcs ingyenes, hacsak nem igényel nagy igénybevételt a Google szervereihez (például egy webalkalmazás fejlesztéséhez).

Az API kulcs regisztrálásához:

Lépjen a Google Cloud Platform Console-ba, és miután bejelentkezett a Google-fiókjával, vagy hozzon létre egy új projektet, vagy válasszon ki egy meglévőt.
Kattints folytatódik az API és az összes kapcsolódó szolgáltatás engedélyezéséhez.
A Hitelesítő adatok oldalt, kap egy API kulcsot. Szükség esetén állítsa be a kulcsra vonatkozó korlátozásokat.
Biztosítsa API kulcsát a Google által ajánlott bevált módszerekkel.

Ha úgy gondolja, hogy a térképet gyakrabban kell megjelenítenie, mint amennyit az ingyenes kvóta megenged, állítson be számlázási megállapodást a Google-lal. A legtöbb webhely - különösen az alacsony forgalmú blogok vagy a niche-oldalak - valószínűleg nem fogyasztják el a kvóta allokációjának nagy részét.

Helyezze be a JavaScriptet a weboldalába

Helyezze be a következő kódot a weboldalába, a HTML dokumentum BODY részébe:

// A térkép inicializálása és hozzáadása
függvény initMap () {
// A zászló helye
var flag = {lat: XXX, lng: YYY};
// A térkép, középen a zászlóval
var map = új google.maps.Map (
document.getElementById ('térkép'), {zoom: 4, center: flag});
// A jelölő a zászlónál helyezkedik el
var marker = new google.maps.Marker ({pozíció: zászló, térkép: térkép});
}