Menu
I have a small web app that can calculate the distance between two points on Google maps.
I would like it to place the user at it's current position when loading the app. I have tried with different geolocation methods without any luck.
The best thing would be to have it calculate the distance from the users position. However, just having the users position in the web-app will be enough for me.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: copenhagen
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
var directionsService = new google.maps.DirectionsService();
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
<title>Distance Calculator</title>
<style type="text/css">
body {
font-family:Helvetica, Arial;
}
#map_canvas {
height: 50%;
}
</style>
</head>
<body>
<body onload="initialize()">
<p>Enter your current location and desired destination to get the distance</p>
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" />
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Distance (km): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
</html>
516
you need to try this link
google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
// setup our variables
var lat1 = this.lat();
var radianLat1 = lat1 * ( Math.PI / 180 );
var lng1 = this.lng();
var radianLng1 = lng1 * ( Math.PI / 180 );
var lat2 = newLatLng.lat();
var radianLat2 = lat2 * ( Math.PI / 180 );
var lng2 = newLatLng.lng();
var radianLng2 = lng2 * ( Math.PI / 180 );
// sort out the radius, MILES or KM?
var earth_radius = 3959; // (km = 6378.1) OR (miles = 3959) - radius of the earth
// sort our the differences
var diffLat = ( radianLat1 - radianLat2 );
var diffLng = ( radianLng1 - radianLng2 );
// put on a wave (hey the earth is round after all)
var sinLat = Math.sin( diffLat / 2 );
var sinLng = Math.sin( diffLng / 2 );
var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
// work out the distance
var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
// return the distance
return distance;
}
distance-finder-google-maps-api
153
To get the user's position using javascript :
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
}
navigator.geolocation.getCurrentPosition(showPosition); // Attach showPosition Callback which will be executed as soon as position is available. Remember it needs user confirmation.
See http://jsfiddle.net/Stouffi/FCFSW/, for example.
UPDATE:
Youd need to change the onclick callback of your calcRoute button. The new one will request user's position. Once position is acquired, calcRoute is called.
function findCurrentLocation() {
navigator.geolocation.getCurrentPosition(calcRoute);
}
In calcRoute, position object will be available as argument, you need to convert him into a LatLng object to deal with google directions service.
function calcRoute(currentLocation) {
// create a LatLng object from the position object.
var start = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
// Continue with your original code.
var end = document.getElementById("end").value;
// etc.
See http://jsfiddle.net/Stouffi/mCYTf/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
