Standort Abfrage mit der Geolocation API im Browser – Webdesig Tipp

Wo ist die nächstgelegene Filiale meines Unternehmens, wo ist der nächste Coiffeur, wie komme ich am schnellsten zum Bodensee? Das sind alles Fragen die vielleicht für eure Webseiten interessant sind und die ihr so oder ähnlich euren Besuchern stellen möchtet. Dafür braucht ihr die sogenannte Gelocation Funktion. Die sorgt dafür das euer Browser euren Standort ermittelt und dann anzeigt und vielleicht dann mit diesen Daten weitere Infos erstellt.

Heute zeige ich euch wie ihr diese API Abfrage starten knnt.

Video

HTML

<h1>Wo genau befindest du dich?</h1>
    <p>Klicke auf den Button, und ermittle deine Position</p>
    <button onclick="getLocation()">Standort abrufen</button>

    <p id="status"></p>
    <p id="coordinates"></p>

    <div id="map"></div>

CSS

#map {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    border: 1px solid #ccc;
}

Javascript

function getLocation() {
    const status = document.getElementById('status');
    const coordinates = document.getElementById('coordinates');

    if (navigator.geolocation) {
        status.textContent = "Standort wird abgerufen...";
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        status.textContent = "Geolocation wird von deinem Browser nicht unterstützt.";
    }
}

function showPosition(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    document.getElementById('status').textContent = "Standort erfolgreich ermittelt:";
    document.getElementById('coordinates').textContent = `Breite: ${lat}, Länge: ${lon}`;

    showMap(lat, lon);
}

function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            document.getElementById('status').textContent = "Benutzer hat die Standortfreigabe verweigert.";
            break;
        case error.POSITION_UNAVAILABLE:
            document.getElementById('status').textContent = "Standortinformationen sind nicht verfügbar.";
            break;
        case error.TIMEOUT:
            document.getElementById('status').textContent = "Die Anfrage zur Standortbestimmung ist abgelaufen.";
            break;
        default:
            document.getElementById('status').textContent = "Ein unbekannter Fehler ist aufgetreten.";
            break;
    }
}

function showMap(lat, lon) {
    const map = document.getElementById('map');
    map.innerHTML = `<iframe 
        width="100%" 
        height="100%" 
        frameborder="0" 
        style="border:0" 
        src="https://www.google.com/maps?q=${lat},${lon}&z=15&output=embed" 
        allowfullscreen>
    </iframe>`;
}