All credits go to @geocodezip :)
JavaScript:
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-34.127895, 140.56842),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
bounds.extend(map.getCenter());
var south = google.maps.geometry.spherical.computeOffset(marker.getPosition(),3532,180);
var line1 = new google.maps.Polyline({
map:map,
path: [marker.getPosition(),south],
strokeWeight: 2,
strokeColor: "#ff0000"
});
bounds.extend(south);
var destination = google.maps.geometry.spherical.computeOffset(south,9211,90);
bounds.extend(destination);
var line2 = new google.maps.Polyline({
map:map,
path: [south, destination],
strokeWeight: 2,
strokeColor: "#ff0000"
});
var destMarker = new google.maps.Marker({
position: destination,
map:map
});
map.fitBounds(bounds);
document.getElementById('info').innerHTML = "distance is "+(google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), destination)/1000.0).toFixed(2)+" km";
var line3 = new google.maps.Polyline({
map:map,
path: [marker.getPosition(), destMarker.getPosition()],
strokeWeight: 2,
strokeColor: "#0000FF"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Html
<div id="map-canvas"></div>
<div id="info"></div>
CSS
#map-canvas, html, body {
height: 95%;
width: 100%;
}
Or you can take a look at :