Geolocation API Demo

HTML

<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWyCb1Xq7gDRWSWRnOAVF3VsBz9TQW-og"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
<div class="container">

  <h1>Geolocation Demo</h1>

  <form id="geocoding_form" class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <button type="button" class="find-me btn btn-info btn-block">Find My Location</button>
      </div>
    </div>
  </form>

  <p class="no-browser-support">Sorry, the Geolocation API isn't supported in Your browser.</p>
  <p class="coordinates">Latitude: <b class="latitude">42</b> Longitude: <b class="longitude">32</b></p>

  <div class="map-overlay">
    <div id="map"></div>
  </div>

</div>

CSS

.container {
  max-width: 980px;
  text-align: center;
  margin: 20px auto;
}

h1 {
  margin-bottom: 20px;
}

#geocoding_form {
  margin: 40px auto 40px;
}

.input-group {
  margin-left: 4%;
}

.find-me.btn:focus {
  border-color: transparent;
  outline: 0;
}

.coordinates {
  font-size: 18px;
  opacity: 0;
  margin-bottom: 40px;
}

.no-browser-support {
  font-size: 18px;
  opacity: 0;
}

.coordinates b:first-child {
  margin-right: 15px;
}

.visible {
  opacity: 1;
}

.map-overlay {
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  border-radius: 2px;
}

#map {
  max-width: 550px;
  height: 400px;
  margin: 0 auto;
}

JavaScript

var findMeButton = $('.find-me');

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {

  findMeButton.addClass("disabled");
  $('.no-browser-support').addClass("visible");

} else {

  findMeButton.on('click', function(e) {

    e.preventDefault();

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

			console.log(position.coords);

      // Create a new map and place a marker at the device location.
      var map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng
      });

      map.addMarker({
        lat: lat,
        lng: lng
      });

    });

  });

}