osrecio/calculate_distance_lat_lng.sql

## calculate_distance_lat_lng.sql
/*
lat = 40.4787268
lng = -3.8530230000000003
*/
SELECT name,address,3956 * 2 * ASIN(SQRT( POWER(SIN((40.4787268 -abs(
dest.lat)) * PI()/180 / 2),2) + COS(40.4787268 * PI()/180 ) * COS(
abs
(dest.lat) *  PI()/180) * POWER(SIN((-3.8530230000000003 - dest.lng) *  PI()/180 / 2), 2) ))* 1.609344 as distance
FROM i4storelocator_store dest
order BY distance limit 3;

/*
lat = 40.4787268
lng = -3.8530230000000003
*/
SELECT name,address,(((acos(sin((40.4787268*pi()/180)) * sin((`lat`*pi()/180))+cos((40.4787268*pi()/180)) * cos((`lat`*pi()/180)) * cos(((-3.8530230000000003 - `lng`)*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance
FROM `i4storelocator_store`
order BY distance limit 3;

## gelolocate_with_html5_map.html
<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

## geolocate_with_html5.html
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>
	/*
	lat = 40.4787268
	lng = -3.8530230000000003
	*/
	SELECT name,address,3956 * 2 * ASIN(SQRT( POWER(SIN((40.4787268 -abs(
	dest.lat)) * PI()/180 / 2),2) + COS(40.4787268 * PI()/180 ) * COS(
	abs
	(dest.lat) * PI()/180) * POWER(SIN((-3.8530230000000003 - dest.lng) * PI()/180 / 2), 2) ))* 1.609344 as distance
	FROM i4storelocator_store dest
	order BY distance limit 3;

	/*
	lat = 40.4787268
	lng = -3.8530230000000003
	*/
	SELECT name,address,(((acos(sin((40.4787268pi()/180)) sin((`lat`pi()/180))+cos((40.4787268pi()/180)) * cos((`lat`pi()/180)) cos(((-3.8530230000000003 - `lng`)pi()/180))))180/pi())601.1515*1.609344) as distance
	FROM `i4storelocator_store`
	order BY distance limit 3;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Geolocation</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

	<script>
	// Note: This example requires that you consent to location sharing when
	// prompted by your browser. If you see a blank space instead of the map, this
	// is probably because you have denied permission for location sharing.

	var map;

	function initialize() {
	var mapOptions = {
	zoom: 6
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	// Try HTML5 geolocation
	if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var pos = new google.maps.LatLng(position.coords.latitude,
	position.coords.longitude);

	var infowindow = new google.maps.InfoWindow({
	map: map,
	position: pos,
	content: 'Location found using HTML5.'
	});

	map.setCenter(pos);
	}, function() {
	handleNoGeolocation(true);
	});
	} else {
	// Browser doesn't support Geolocation
	handleNoGeolocation(false);
	}
	}

	function handleNoGeolocation(errorFlag) {
	if (errorFlag) {
	var content = 'Error: The Geolocation service failed.';
	} else {
	var content = 'Error: Your browser doesn\'t support geolocation.';
	}

	var options = {
	map: map,
	position: new google.maps.LatLng(60, 105),
	content: content
	};

	var infowindow = new google.maps.InfoWindow(options);
	map.setCenter(options.position);
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>