Egyszerű útmutató a Google Térkép beágyazásához a weboldaladra néhány útvonal megjelenítéséhez
Miért érdemes a Google Térképet használni?
Ha egy weboldalon szeretnél néhány konkrét útvonalat megjeleníteni, például egy rendezvény helyszíne és a parkoló között, vagy egy városnéző túra állomásai között, akkor a Google Térkép egy nagyszerű megoldás.
Ez a szolgáltatás lehetővé teszi, hogy:
- Áttekinthetően jelenítsd meg az útvonalakat: Egyetlen térképen láthatóvá válnak a különböző útvonalak, így könnyen követhetők.
- Pontos tájékoztatást adj: A Google Térkép pontos távolság- és időadatokat szolgáltat.
- Interaktív térképet készíts: A felhasználók nagyíthatnak, kicsinyíthetnek és akár a saját helyüket is megkereshetik a térképen.
-
Hogyan csináld?
-
Regisztrálj a Google Cloud Platformon:
- Hozz létre egy új projektet.
- Engedélyezd a Billinget, hogy nyomon követhesd a használatot (az ingyenes keret általában elegendő egy egyszerű weboldalhoz).
-
Készíts API-kulcsot:
- A projektedben hozz létre egy új API-kulcsot. Ezt fogod a weboldaladon használni.
-
Ágyazd be a kódot a weboldaladra:
- Másold ki a Google által generált kódot, és illeszd be a weboldalad azon részébe, ahol a térképnek meg kell jelennie.
- A kódban megadhatod a térkép középpontját, a nagyítást és a megjelenítendő útvonalakat.
Példa egy egyszerű kódra:
function initMap() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 47.4979, lng: 19.0402 }, // Budapest koordinátái
zoom: 13,
});
directionsRenderer.setMap(map);
// Példa egy útvonalra:
const request = {
origin: 'Deák Ferenc tér, Budapest',
destination: 'Szent István bazilika, Budapest',
travelMode: 'WALKING' // Gyalogos útvonal
};
directionsService.route(request, (result, status) => {
if (status === "OK") {
directionsRenderer.setDirections(result);
} else {
window.alert("Hiba történt az útvonal kiszámításakor.");
}
});
}
Mit jelent ez a kód egyszerűen?
initMap függvény: Ez a függvény inicializálja a térképet.directionsService: Ez a szolgáltatás felelős az útvonalak kiszámításáért.directionsRenderer: Ez a szolgáltatás rajzolja ki a térképre az útvonalakat.request objektum: Ebben adod meg az útvonal kezdő és végpontját, valamint a közlekedési módot.
Fontos tudnivalók:
- Egyéni igények: A fenti kód csak egy alap példa. A weboldaladhoz igazítanod kell.
- Több útvonal: Több
request objektumot is létrehozhatsz, és mindegyiket átadhatod a directionsService.route metódusnak. - Egyéb beállítások: A Google Maps API-k számos további lehetőséget kínálnak a térkép testreszabására.
Hol találsz segítséget?
- Google Maps Platform dokumentáció: Itt részletes leírást találsz a különböző funkciókról.
- Online fórumok: Sok fejlesztő segít szívesen a problémáid megoldásában.
- Mesterséges Intelligencia, mely a felületen is beépítésre került.
Még mindig kérdésed van?
Ha konkrét kérdésed van, például egy bizonyos funkcióval kapcsolatban, vagy ha szeretnél egy még részletesebb példát látni, nyugodtan tedd fel!
Tipp: Ha nem szeretnél a kóddal bajlódni, számos online eszköz is rendelkezésre áll, amelyek segítségével egyszerűen létrehozhatsz egy beágyazható Google Térképet.
Fontos: A Google Térkép API-k használatához alapszintű JavaScript ismeret szükséges.
ELKEZDEM
vagy
Beszélek egy szakértővel
Gyors eljutás: Az M3-as autópályáról 2 perc alatt megközelíthető, (leágazás a 139 km-nél) így gyorsan és kényelmesen eljuthatsz hozzánk.
