<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<title>Calculate distance with Google Maps API</title>
<script src="http:/maps.google.com/maps?
file=api&key=ABQIAAAA4sriqqpkT4rZot1cK9vguRTEe3oPwTvvxdMV9j-
szy2Bac4x0hTS_bXwPwBy0LvCWWXgMNkzvr87gQ" type="text/javascript"></
script>
<script src="http://maps.google.com/maps/api/js?sensor=false";
type="text/javascript"></script>
<script type="text/javascript">
var geocoder, location1, location2;
// setup the map variables
// this is for displaying the two points on the map using the
DirectionService() API Call
var rendererOptions = {
draggable: true
};
var directionsDisplay = new
google.maps.DirectionsRenderer(rendererOptions);;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
// default location is Chicago USA, perhaps change to your place of
business?
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay,
'directions_changed', function() {
calculateDistance(directionsDisplay.directions);
});
defaultSettings();
}
function calcRoute() {
if (document.getElementById("start").value != "") {
activeSettings();
}
else{
defaultSettings();
}
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
alert(start);
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);
}
});
}
function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(start.lat, start.lon);
var glatlng2 = new GLatLng(end.lat, end.lon);
var miledistance = glatlng1.distanceFrom(glatlng2,
3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);
document.getElementById('results').innerHTML =
'<strong>Address 1:
</strong>' + start.address + ' (' + start.lat + ':' + start.lon +
')<br /><strong>Address 2: </strong>' + end.address + ' (' + end.lat +
':' + end.lon + ')<br /><strong>Distance: </strong>' + miledistance +
' miles (or ' + kmdistance + ' kilometers)';
}
catch (error)
{
alert(error);
}
}
function defaultSettings(){
/* set properties */
document.getElementById("map_canvas").style.width="100%";
document.getElementById("directionsPanel").style.display="none";
document.getElementById("total").style.display="none";
}
function activeSettings(){
/* set properties */
document.getElementById("map_canvas").style.width="70%";
document.getElementById("directionsPanel").style.display="block";
document.getElementById("total").style.display="block";
}
window.onload=function(){
initialize();
}
</script>
</head>
<body>
<div>
<form>
Start: <input id="start" type="text" name="address1" value=""
class="address_input" size="5" />
End: <input id="end" type="text" name="address2" value=""
class="address_input" size="5" />
<input type="button" name="find" value="Search"
onclick="calcRoute()">
</form>
<p><strong>Distance Results:</strong><br/><span id="results"></
span></p>
<p><strong>Price Results:</strong><br/><span id="price"></span></
p>
<div id="map_canvas" style="top:265px;"></div>
<div id="directionsPanel">
<p><span id="total"></span></p>
</div>
</body>
</html>
On Jan 17, 2:27 pm, Rossko <[email protected]> wrote:
> > Can someone please help me on this...
>
> Larry's advice still stands
> "The posting guidelines call for a link to your map, not a code
> dump. If you provided that, we might be able to tell why the map is
> not displaying "
--
You received this message because you are subscribed to the Google Groups
"Google Maps API V2" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
