Geo-location

Geo-location Features

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<button class="btn btn-primary" id="getLocation">
  Get Location
</button>

<div id="output"></div>

CSS

body {
  padding: 60px;
}

JavaScript

//https://developers.google.com/maps/documentation/static-maps/intro

var output = $('#output'),
  getLocation = $('#getLocation');
//https://maps.googleapis.com/maps/api/staticmap?center=28.546125999999997,-81.39762089999999&zoom=13&size=1000x1000&sensor=false&markers=color:red|label:S|28.546125999999997,-81.39762089999999

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

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

    output.html('<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>');

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=330x200&sensor=false&markers=color:blue|label:S|32801";

    output.append(img);
  };

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

  output.html("<p>Locating…</p>");

  navigator.geolocation.getCurrentPosition(success, error);

});