Útvonalak hozzád a Google térképen és a Honlapodon

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?

1. 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).

2. Készíts API-kulcsot:

   • A projektedben hozz létre egy új API-kulcsot. Ezt fogod a weboldaladon használni.

3. Á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