I am trying to get the distance between two location using Google Mps API following this post. I also found the following example.
I have integrated the same code and but I don’t see any results. What am I doing wrong here?
Can anyone please let me know of any links where the examples have been indicated for Google Maps APIv3?
<html>
<head>
<style>
h1{
font-family:arial,helvetica,sans-serif;
font-size:20px;
font-weight:bold;
}
p{
font-family:arial,helvetica,sans-serif;
}
</style>
<script include="/home/rajeev/Desktop/ge/jquery-1.7.2.js"></script>
<script>
var map;
var marker, marker2;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-36.86501268451408, 174.723858833313),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
$(function() {
initialize();
var geocoder = new google.maps.Geocoder();
//Geocode the first address
geocoder.geocode({
address : '27 West View Road Westmere Auckland New Zealand',
region: 'no'
}, function(results, status){
//Create the first marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
map: map,
});
//Now geocode the second address
geocoder.geocode({
address : '37 Old Mill Road Westmere Auckland New Zealand',
region: 'no'
}, function(results, status){
//Create the second marker
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
map: map,
});
//Now create the line (we have both markers at this point guaranteed)
var line = new google.maps.Polyline({
path: new Array(marker.getPosition(),marker2.getPosition()),
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
//Now calculate the distance
var R = 6371; // km
var dLat = (marker.getPosition().lat() - marker2.getPosition().lat()).toRad();
var dLon = (marker.getPosition().lng()- marker2.getPosition().lng()).toRad();
var lat1 = marker2.getPosition().lat().toRad();
var lat2 = marker.getPosition().lat().toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var distance = Math.ceil(R * c * 1000);
$('p').html('The distance between the two addresses is:' + distance +'m');
});
});
});
if (typeof(Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
}
</script>
</head>
<body>
<h1>Distance polyline between two street addresses</h1>
<hr/>
<p>
</p>
<hr/>
<div id="map-canvas" style="width:500px;height:500px"></div>
</body>
This is not correct
use
Also, include Google Maps API
You can also use jQuery from Google CDN