<button id="btn"  type="button"  onclick="getPosition()" class="btn btn-default">Hvor fanden er jeg ???</button></span><p>
<div id="alert" class="alert alert-warning" role="alert">
  Bruger browserens Geolocation til opslag i DAWA. Geolocation er mest præcis for enheder med GPS.
</div>
<div id="outer" style="visibility:hidden"> 
<div class="card card-cascade narrower">
      <div class="view view-cascade gradient-card-header blue-gradient">
        <h5 class="mb-4" >Du er jo lige her....</h5>
      </div>
      <div class="card-body card-body-cascade text-center">
        <div id="map-container-google-8" class="z-depth-1-half map-container-5" style="height: 300px">
        </div>
      </div>
    </div>
<div class="card card-cascade narrower">
      <div class="view view-cascade gradient-card-header peach-gradient">
        <h5 class="mb-4" >Lidt mere info....</h5>
      </div>
      <div class="card-body ">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="table-responsive">
        <table id="dataTable"  class="table table-bordered table-hover" style="text-align:left">
          
</table>
      </div>
    </div>      
  </div>
</div>
        </div>
      </div>
    </div>
</div>
h5 {
 margin-top:15px;
  text-align:center;
  color:white;
  font-size:20px;
}

#btn {  
  margin:0 auto;
  margin-top:30px;
  display:block;
}

.alert { font-size:12px;}
function getPosition(){
  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition); 
  }
}

function showPosition(position) {
document.getElementById("outer").style.visibility = "visible";
  initMap(position);
getDawaData(position);
}

function getDawaData(position){
  var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    var adresse = data.vejstykke.navn + " " + data.husnr + ", " + data.postnummer.nr + " " + data.postnummer.navn;
    var s = "";
    s += "<tr><td><b>Adresse</b></td><td>" + adresse + "</td></tr>";
    s += "<tr><td><b>Koordinater</b></td><td>Længdegrad: "  + 
      position.coords.longitude.toFixed(4) + 
      ", Breddegrad: " +position.coords.latitude.toFixed(4) +  
      " (Højde over havet: " + data.adgangspunkt.højde + " meter)</td></tr>";
    s += "<tr><td><b>Region</b></td><td>" + data.region.navn + "</td></tr>";
    s += "<tr><td><b>Kommune</b></td><td>" + data.kommune.navn + "</td></tr>";
    s += "<tr><td><b>Sogn</b></td><td>" + data.sogn.navn + "</td></tr>";
    s += "<tr><td><b>Ejerlav</b></td><td>" + data.ejerlav.navn + "</td></tr>";
    s += "<tr><td><b>Matrikelnummer</b></td><td>" + data.matrikelnr + "</td></tr>";
    s += "<tr><td><b>Ejendomsnummer</b></td><td>" + data.esrejendomsnr + "</td></tr>";
    s += "<tr><td><b>Zone</b></td><td>" + data.zone + "</td></tr>";
    s += "<tr><td><b>Retskreds</b></td><td>" + data.retskreds.navn + "</td></tr>";
    s += "<tr><td><b>Politikreds</b></td><td>" + data.politikreds.navn + "</td></tr>";
    s += "<tr><td><b>Opstillingskreds</b></td><td>" + data.opstillingskreds.navn + "</td></tr>";
    s += "<tr><td><b>Afstemningsområde</b></td><td>" + data.afstemningsområde.navn + "</td></tr>";
    s += "<tr><td><b>Storkreds</b></td><td>" + data.storkreds.navn + "</td></tr>";
    s += "<tr><td><b>Valglandsdel</b></td><td>" + data.valglandsdel.navn + "</td></tr>";

    document.getElementById("dataTable").innerHTML += s;
  }
};
xmlhttp.open("GET", "https://dawa.aws.dk/adgangsadresser/reverse?x=" + position.coords.longitude + "&y=" + position.coords.latitude, true);
xmlhttp.send();
}

function initMap(position) {
  map = new google.maps.Map(document.getElementById("map-container-google-8"), {
    center: { lat: Number(position.coords.latitude), lng: Number(position.coords.longitude)  },
    zoom: 17
  });
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.