Mit kell tudni
- Menj a Google Cloud Platform konzol és hozzon létre vagy jelöljön ki egy projektet, majd kattintson a gombra Folytatni. A Hitelesítő adatok oldalt, kap egy API kulcs.
- Helyezze be az alább látható JavaScript kódot a HTML dokumentum BODY részébe.
- A HTML-dokumentum fejlécében adja meg a térkép CSS-megszorításait, beleértve a méretezést, a színeket és az oldal elhelyezését.
Ez a cikk elmagyarázza, hogyan helyezhet be egy Google térképet egy helyjelzővel a weboldalába. Ez a folyamat magában foglalja egy speciális szoftverkulcs beszerzését a Google-tól, majd a megfelelő JavaScript hozzáadását az oldalhoz.
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 szerezzen 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ása:
Menj a Google Cloud Platform konzol és miután bejelentkezett a Google-fiókjával, vagy hozzon létre egy új projektet, vagy válasszon ki egy meglévőt.
Kattintson a gombra Folytatni az API és az összes kapcsolódó szolgáltatás engedélyezéséhez.
A Hitelesítő adatok oldalt, kap egy API kulcs. Szükség esetén állítson be releváns korlátozásokat a kulcsra.
Az API kulcsot a legjobb gyakorlatok a Google ajánlja.
Ha úgy gondolja, hogy a térképet gyakrabban kell megjelenítenie, mint amennyit az ingyenes kvóta lehetővé tesz, á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 webhelyek, 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 weblapjára, a HTML dokumentum BODY részébe:
// Inicializálja és adja hozzá az initMap () {térképfunkciót {
// A flag flag helye = {lat: XXX, lng: YYY};
// A térkép, középen a flag var map = new google.maps oldalon. Térkép (document.getElementById ('térkép'), {zoom: 4, középen: flag});
// A jelölő, a flag jelölőnél elhelyezve: var marker = new google.maps. Jelölő ({pozíció: zászló, térkép: térkép}); } src = " https://maps.googleapis.com/maps/api/js? kulcs = YOUR_API_KEY & callback = initMap ">
Ebben a kódban módosítsa a következőket:
- Cserélje ki zászló egy névvel, amely a rögzített helyre hivatkozik. Legyen egyszerű és rövid (például itthon vagy hivatal vagy Párizs vagy Detroit). Ezt a kódot futtathatja zászló van, de a név megváltoztatása támogatja a kód újrafelhasználását ugyanazon az oldalon, több különböző térkép beágyazásához.
- Cserélje ki XXX és YYY a térkép jelölőjének szélességével és hosszúságával, tizedesjegyekkel. A térkép megfelelő megjelenítéséhez ezeket az értékeket ki kell cserélnie. A szélesség és hosszúság megkeresésének egyszerű módja a Google Térkép megnyitása, és a jobb egérgombbal kattintson a megjelölni kívánt pontos helyre. A helyi menüben válassza a lehetőséget Mi van itt? a szélesség és hosszúság megtekintéséhez.
- Cserélje ki YOUR_API_KEY a Google-tól kapott API-kulccsal. Ne tegyen szóközt az egyenlőségjel és az jel közé. Kulcs nélkül a lekérdezés sikertelen lesz, és a térkép nem jelenik meg megfelelően.
Optimális gyakorlatok
A HTML-dokumentum fejében adja meg a térkép CSS-megszorításait, beleértve a méretezést, a színeket és az oldalelhelyezést.
A Google térképszkriptje hasonló tulajdonságokat tartalmaz zoomolás és központ amelyek nyitottak a végfelhasználói módosításokra. Ezt a fejlettebb technikát a Google fejlesztői dokumentációja támogatja.
A Google Maps API értékes eszköz. A Google bevált gyakorlati útmutatói kiváló tanácsokat kínálnak a kulcs biztosításához a mások általi visszaélésekkel szemben. A megfelelő biztonság különösen akkor fontos, ha fizetési rendszert állított be az API-hozzáféréshez, mivel merev számlával szembesülhet, ha hitelesítő adatait ellopják. Különösen az itt bemutatott példa csinál beágyazza az API kulcsot közvetlenül a kódba - ezt az eljárás bemutatása céljából tettük. Éles környezetben azonban jobb, ha a kulcs közvetlen beszúrása helyett környezeti változókat ad meg a kulcshoz.