geolocation

by dirkk0

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id='map_canvas'></div>

<div id="lat"></div>
<div id="lon"></div>
<div id="alt"></div>
<div id="acc"></div>
<div id="atc"></div>
<div id="hea"></div>
<div id="spe"></div>
<div id="pla"></div>
<div id="ctr"></div>

CSS

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

JavaScript

var counter = 0;

function doGeo(position) {

  lat = position.coords.latitude;
  lon = position.coords.longitude;

  if (lon >= 7.008395) {
    pla = "K";
  } else {
    pla = "W"
  }

  $("#lat").html("lat: " + position.coords.latitude);
  $("#lon").html("lon: " + position.coords.longitude);
  $("#alt").html("alt: " + position.coords.altitude);
  $("#acc").html("acc: " + position.coords.accuracy);
  $("#atc").html("atc: " + position.coords.altitudeAccuracy);
  $("#spe").html("spe: " + position.coords.speed);
  $("#pla").html("spe: " + pla);
  $("#hea").html("hea: " + position.coords.heading);

  $("#ctr").html("ctr: " + counter);
  counter = counter + 1;
  console.log('test');
  myMarker.setPosition(new google.maps.LatLng(lat,lon));
}

function lost() {
  console.log('lost');
};


var wpid = navigator.geolocation.watchPosition(doGeo, lost, {
  maximumAge: 0,
  enableHighAccuracy: true
});

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 20,
  center: new google.maps.LatLng(50.961, 7.008397),
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

var myMarker = new google.maps.Marker({
  position: new google.maps.LatLng(50.961, 7.008397)
});
map.setCenter(myMarker.position);
myMarker.setMap(map);

myMarker.setPosition(new google.maps.LatLng(50.961,7.008497));