Ya sabemos como obtener direcciones con la API de Google Maps y mostrarlas en nuestro mapa. Ahora si eres de los que desea más información podemos personalizar nuestro mapa para que muestre la información de la ruta obtenida, elementos como la distancia al destino (en millas, kilómetros), y las indicaciones exactas sobre donde tomar que vía y a que distancia de la misma hacerlo, para ello solo debemos modificar ligeramente el anterior código para agregar un par de elementos.

 

Descarga el código fuente

Añadir el Panel de información

Al realizar la petición el objeto DirectionsRenderer, almacena la información detallada de los pasos a seguir para desplazarnos de un punto al otro, y lo podemos mostrar utilizando el método setPanel(elemento). Donde elemento es el contenedor HTML donde deseamos mostrar dicha información (generalmente un elemento <div>). Por lo que en la función donde creamos el objeto DirectionsRenderer, también definiremos el panel donde mostrar la información.

1
2
3
4
5
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

// Aqui agregamos el setPanel para la información
directionsRenderer.setPanel(document.getElementById('directions-panel'));

 

Agregamos el elemento HTML y algunos estilos

Por último añadimos al documento el elemento contenedor <div>

1
<div id="directions-panel" ></div>

Y algunos estilos para hacer más amigable la vista al usuario.

1
2
3
4
5
6
7
8
9
10
11
#mapa {
margin-right: 400px;
height: 400px;
width: 800;
}
#directions-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}

 

El script final

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
<head>
<title>Local</title>
<style type="text/css">
#mapa {
margin-right: 400px;
height: 400px;
width: 800;
}
#directions-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
</style>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >

var map;
var myPos;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();

if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoOK, geoKO);
} else {
geoMaxmind();
}
function geoOK(position) {
showMap(position.coords.latitude, position.coords.longitude);
}
function geoMaxmind() {
showMap(geoip_latitude(), geoip_longitude());
}

function geoKO(err) {
if (err.code == 1) {
error('El usuario ha denegado el permiso para obtener informacion de ubicacion.');
} else if (err.code == 2) {
error('Tu ubicacion no se puede determinar.');
} else if (err.code == 3) {
error('TimeOut.')
} else {
error('No sabemos que pasó pero ocurrio un error.');
}
}

function showMap(lat, longi) {

myPos = new google.maps.LatLng(lat,longi);
var myOptions = {
zoom: 13,
center: myPos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById("mapa"), myOptions);

var marker = new google.maps.Marker({
position: myPos,
title:"Hola Mundo",
draggable:true,
animation: google.maps.Animation.DROP
});

marker.setMap(map);

directionsRenderer = new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

directionsRenderer.setPanel(document.getElementById('directions-panel'));
}

function travelToAddress(){

//Obtenemos la direccion
destino=document.forms[0].address.value;
directionsService = new google.maps.DirectionsService();

// opciones de busqueda
var request = {
origin: myPos,
destination: destino,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request,getRuta);
}

function getRuta(result, status){

if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
} else {
error("Ha ocurrido un error debido a : " + status);
}

function error(msg) {
alert(msg);
}
</script>
</head>
<body>
<h1>Mapa</h1>
<form>
<input type="text" style="width: 450px" name="address" />
<input type="button" value="Obtener ruta a esta direccion" onclick="travelToAddress();"/>
</form>
<div id="directions-panel" ></div>
<div id="mapa" ></div>
</body>
</html>

 

 

¡Pruebalo! 

Descargalo

 

(Visited 359 times, 1 visits today)