Veo varios errores que te los comento "groso modo":
- No veo la API de Google maps (<script src="http://maps.google.com/maps?file=api&v=2&key=LA QUE TU TENGAS&sensor=true" type="text/javascript"></script>
- La dirección ha de ir separada por comas.
- No entiendo esta línea (var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);).
Dado que vengo trabajando con la V3 de Google (que difiere sustancialmente de la V2 que utilizas), he preferido rearmar la página, incluyendo el mapa correspondiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</script>
<style type="text/css">
body {
margin: 20px;
font-family: courier, sans-serif;
font-size: 12px;
}
#map {
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
</style>
<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var origin1 = 'melilla 67, la linea';
var destination1 = 'san pablo 33, la linea';
var destinationIcon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
var originIcon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";
function initialize() {
var opts = {
center: new google.maps.LatLng(36.171486,-5.351801),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin1],
destinations: [destination1],
travelMode: google.maps.TravelMode.DRIVING, // SI VAS EN COCHE
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += origins[i] + " a " + destinations[j]
+ ": " + results[j].distance.text + "en "
+ results[j].duration.text + "<br />";
}
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: "
+ status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize()">
<div id="inputs">
<pre class="prettyprint">
direccion1 = 'melilla 67, la linea';
direccion2 = 'san pablo 33, la linea';
</pre>
<p><button type="button" onclick="calculateDistances();">Calcula distancia</button></p>
</div>
<div id="outputDiv"></div>
<div id="map"></div>
</body>
</html>
Lo he dejado en modo de ruta en coche. Puedes calcularlo A PIE ("WALKING") o en linea recta (DIRECT).
