Geolocation

In this example we experiment with the Geolocation API. We create an app that shows our current coordinate and shows the location on Google Maps

index.html.haml
%strong Location
%br
latitude:
%span.latitude
%br
longitude:
%span.longitude
%br
accuracy:
%span.accuracy
%br
altitude:
%span.altitude
%br
heading:
%span.heading
%br
speed:
%span.speed
%br
#map(style="width:300px; height:200px")

index.html.haml
var myLatLng;
var map;
var marker;

$(function() {
  //Get position fast and initialized google map
  navigator.geolocation.getCurrentPosition(function(geodata) {
    myLatLng = new google.maps.LatLng(geodata.coords.latitude, geodata.coords.longitude);
    
    var myOptions = { center: myLatLng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    marker = new google.maps.Marker( { position: myLatLng, map: map, title:"My position" });
  });
  //Update the position at least every 5 seconds and use GPS if available
  navigator.geolocation.watchPosition(function(geodata) {
    $(".latitude").html(geodata.coords.latitude);
    $(".longitude").html(geodata.coords.longitude);
    $(".accuracy").html(geodata.coords.accuracy);
    $(".altitude").html(geodata.coords.altitude);
    $(".heading").html(geodata.coords.heading);
    $(".speed").html(geodata.coords.speed);
    
    myLatLng = new google.maps.LatLng(geodata.coords.latitude, geodata.coords.longitude);
    marker.setPosition(myLatLng);
    map.setCenter(myLatLng);
  },function() {},{enableHighAccuracy:true, maximumAge:30000, timeout:5000} );  
})