Silverterra 3d blog

Goal: how can I use the geo location

This is a simple code copy from: click to visit
I’ve modified the code to put a marker to the center:

    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + an +"zoom=15&size=300x300&sensor=false&markers=color:blue|label:You|" + latitude + "," + longitude + "";

… and you will see a blue marker at the ecenter of the map…

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

Show my location

Thursday, June 26th, 2014 at 11:09.
Filed under html5.