Get distance between two points using Google Maps API.
Sample php and javascript code. You must include your
Google API Key
<?
require_once ('config.php');
$loc = "PRICING";
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Clculate Distance</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyJ9xN1C4xteEJ-4A4zUUDjCf9F8&sensor=true"></script>
<script type="text/javascript" src="js/price-calculater.js"></script>
</head>
<body onload="initializemap();">
<!-- Header -->
<? require_once ('header.php'); ?>
<!-- /Header -->
<div class="clear"></div>
<section class="container clearfix">
<header class="container page_info clearfix">
<h1 class="regular brown bottom_line">Pricing</h1>
<div class="clear"></div>
<p>Select Strat and end point to calculete the distance and price. <a href="pricing.php">Reset</a></p>
</header>
<div id="content" class="grid col-940">
<div class="container">
<div id="map_canvas" class="map_box"></div>
</div>
<div class="container">
<div class="quate-form" id="quate-form">
<form class="wpcf7-form" method="post" action="index.html">
<p>From (Pick up address)<br>
<span class="wpcf7-form-control-wrap pick-up-address"><textarea rows="5" cols="40" class="wpcf7-form-control wpcf7-textarea" name="address1" id="address1" style="width:100%;height:70px"></textarea></span></p>
<p>To (Drop off location)<br>
<span class="wpcf7-form-control-wrap drop-off-location"><textarea rows="5" cols="40" class="wpcf7-form-control wpcf7-textarea" name="address2" id="address2" style="width:100%;height:70px"></textarea></span></p>
<input type="button" value="Show" onclick="initialize();"/>
</form>
</div>
<div style="width:100%; height:10%" id="distance_road"></div>
<div class="pricing_box" id="price-container"> <!-- pricing_box starts -->
<div class="clear padding10"></div>
<div class="col_1_3">
<div class="features">
<span class="img one"> </span> <br/>
<ul>
<li><input type="radio" value="336.60" id="saloon" name="vehicle-type"></li>
<li><span class="header">Sedan:1-4passengers</span></li>
<li><span class="price" id="saloon-span"></span></li>
</ul>
</div>
</div>
<div class="col_1_3">
<div class="features">
<span class="img two"> </span><br/>
<ul>
<li> <input type="radio" value="415.80" id="6seat" name="vehicle-type"></li>
<li><span class="header">SUV:1-7passengers</span></li>
<li><span class="price" id="6seat-span"></span></li>
</ul>
</div>
</div>
<div class="col_1_3 last">
<div class="features">
<span class="img three"> </span><br/>
<ul>
<li><input type="radio" value="693.00" id="8seat" name="vehicle-type"></li>
<li><span class="header">VAN:1-15passengers</span></li>
<li><span class="price" id="8seat-span"></span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<? require_once ('footer.php'); ?>
<!-- /footer -->
</body>
</html>
var location1;
var location2;
var address1;
var address2;
var latlng;
var geocoder;
var map;
var distance;
var markerPrevious;
var map = null;
var marker;
function initializemap() {
var mapOptions = {
center: new google.maps.LatLng(39.28735, -76.96431),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
google.maps.event.addListener(map, 'click', function(event){
geodecode(event.latLng, 'none');
});
google.maps.event.addListener(marker, 'click', function(event){
geodecode(event.latLng, 'none');
});
}
function reset(){
var mapOptions = {
center: new google.maps.LatLng(39.28735, -76.96431),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
document.getElementById("address1").value='';
document.getElementById("address2").value='';
document.getElementById("price-container").style.display = 'none';
document.getElementById("distance_road").innerHTML= '';
document.getElementById("quate-form").style.display = 'block';
google.maps.event.addListener(map, 'click', function(event){
geodecode(event.latLng, 'none');
});
google.maps.event.addListener(marker, 'click', function(event){
geodecode(event.latLng, 'none');
});
}
function geodecode(latLng, myPoint){
//marker.setPosition(latLng);
//alert(latLng);
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({});
var mapOptions = {
center: new google.maps.LatLng(39.28735, -76.96431),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var str = '<div style="text-align: center;">';
str += '<b>Loading...</b>';
str += '</div>';
infowindow.setContent(str);
infowindow.open(map, marker);
geocoder.geocode({'latLng': latLng}, function(results, status){
if (status != google.maps.GeocoderStatus.OK) {
return;
}
var addr = results[0].formatted_address;
if(myPoint != 'none'){
var marker3 = new google.maps.Marker({
position: myPoint,
map: map,
title: addr
});
}
var str = '<div>';
str += '<div style="text-align: center; font-size: 110%;">';
str += '<p><span class="addr">' + addr + '</span>';
str += '</p>'
str += '<button class="pick-up-addr">Pick up address</button> ';
str += '<button class="drop-off-addr">Drop off address</button>';
str += '</div>';
str += '</div>';
var node = $(str);
node.find('button.pick-up-addr').click(function(){
document.getElementById("address1").value = addr;
marker = new google.maps.Marker({map: map});
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: addr
});
infowindow.close();
return false;
});
node.find('button.drop-off-addr').click(function(){
document.getElementById("address2").value = addr;
infowindow.close();
marker1 = new google.maps.Marker({map: map});
var marker1 = new google.maps.Marker({
position: latLng,
map: map,
title: addr
});
initialize();
return false;
});
markerPrevious = latLng;
infowindow.setContent(node[0]);
infowindow.setPosition(latLng);
infowindow.open(map);
});
google.maps.event.addListener(map, 'click', function(event){
geodecode(event.latLng, markerPrevious);
});
}
// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
geocoder = new google.maps.Geocoder(); // creating a new geocode object
// getting the two address values
address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;
// finding out the coordinates
if (geocoder)
{
geocoder.geocode( { 'address': address1}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
//alert(location1);
});
geocoder.geocode( { 'address': address2}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of second address (latitude + longitude)
location2 = results[0].geometry.location;
// calling the showMap() function to create and show the map
showMap();
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
// creates and shows the map
function showMap()
{
// alert(location1);
location1=location1;
// center of the map (compute the mean value between the two locations)
latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
// set map options
// set zoom level
// set center
// map type
var mapOptions =
{
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create a new map object
// set the div id where it will be shown
// set the map options
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin:location1,
destination:location2,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
//distance = "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
var mdistance = parseFloat(response.routes[0].legs[0].distance.text);
//alert(mdistance);
var saloon = (mdistance * 2.55).toFixed(2);
var seat6 = (mdistance * 3.15).toFixed(2);
var seat8 = (mdistance * 5.25).toFixed(2);
// alert(saloon);
document.getElementById("saloon-span").innerHTML = "Pricing : $"+saloon;
document.getElementById("saloon").value = saloon;
document.getElementById("6seat-span").innerHTML = "Pricing : $"+seat6;
document.getElementById("6seat").value = seat6;
document.getElementById("8seat-span").innerHTML = "Pricing : $"+seat8;
document.getElementById("8seat").value = seat8;
document.getElementById("price-container").style.display = 'block';
document.getElementById("quate-form").style.display = 'none';
}
});
// show a line between the two points
var line = new google.maps.Polyline({
map: map,
path: [location1, location2],
strokeWeight: 7,
strokeOpacity: 0.8,
strokeColor: "#FFAA00"
});
// create the markers for the two locations
var marker1 = new google.maps.Marker({
map: map,
position: location1,
title: "First location"
});
var marker2 = new google.maps.Marker({
map: map,
position: location2,
title: "Second location"
});
// create the text to be shown in the infowindows
var text1 = '<div id="content">'+
'<h1 id="firstHeading">First location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location1+'</p>'+
'<p>Address: '+address1+'</p>'+
'</div>'+
'</div>';
var text2 = '<div id="content">'+
'<h1 id="firstHeading">Second location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location2+'</p>'+
'<p>Address: '+address2+'</p>'+
'</div>'+
'</div>';
// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
content: text1
});
var infowindow2 = new google.maps.InfoWindow({
content: text2
});
// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker1);
});
// compute distance between the two points
var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(dLat1) * Math.cos(dLat1) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
//document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
}
function toRad(deg)
{
return deg * Math.PI/180;
}
