Hotel Standort auf einer Karte anzeigen
Um den Standort eines Hotels in einer Booking App auf einer Karte darzustellen, verwendet man oft Karten-APIs wie Google Maps, Leaflet oder OpenStreetMap. Das grundlegende Vorgehen besteht darin, die geografischen Koordinaten (Breiten- und Längengrad) des Hotels zu kennen und diese Koordinaten an die Karten-API zu übergeben, um die Position auf der Karte zu markieren.
Google Maps Beispiel
Hier zeigen wir, wie man mit der Google Maps JavaScript API eine Karte mit einem Marker auf den Standort eines Hotels darstellt. Voraussetzung ist, dass man einen API-Schlüssel von Google besitzt.
Erklärung
Der Code bindet die Google Maps API als Script mit dem eigenen API-Schlüssel ein. Sobald die API geladen ist, wird die Funktion initMap aufgerufen, welche eine Karte mit den Koordinaten des Hotels initialisiert und einen Marker auf diesen Punkt setzt. Man muss also zunächst die Breiten- und Längengrade des Hotels ermitteln (z.B. über eine Datenbank oder API) und diese Werte in den JavaScript-Code einsetzen.
Alternative: Leaflet mit OpenStreetMap
Falls man keine Google Maps API verwenden möchte, kann man die Open-Source-Bibliothek Leaflet nutzen, die OpenStreetMap Karten verwendet und kostenfrei ist:
Fazit
Um den Standort eines Hotels auf einer Karte in einer Booking App darzustellen, sind die wichtigsten Schritte die Beschaffung der Koordinaten und das Einbinden einer Kartenbibliothek. Google Maps ist sehr weit verbreitet, Leaflet stellt eine kostenlose Alternative dar. Beide Methoden erlauben das Platzieren eines Markers an den gewünschten Hotelkoordinaten und erleichtern so dem Nutzer die Orientierung.