proyecto aplicación de google maps

UNIVERSIDAD AUTONOMA DE CHIHUAHUAFACULTAD DE INGENIERIA

PROYECTOS PROFESIONALES 1

API DE GOOGLE MAPS V3

Equipo 7 Ceres Valles Ramrez Israel Torres Orozco Francisco Molina Jaime Jess Ignacio Hernndez Rodrguez

Facultad de Ingeniera UACH Proyectos Profesionales 1

Contenido1 INTRODUCCIN ............................................................................................................................. 3 2 ALCANCES DEL API DE GOOGLE MAPS ................................................................................. 4 2.1 Posicionamiento mediante latitud y longitud ................................................................................ 4 2.2 Tipos de Vista de los mapas.......................................................................................................... 4 2.3 Street View.................................................................................................................................... 4 2.4 Ventanas de Informacin .............................................................................................................. 4 2.5 Imgenes de puntos personalizadas .............................................................................................. 4 2.6 Servicio de Direcciones ................................................................................................................ 5 2.7 Funcin de zoom personalizado.................................................................................................... 5 2.8 Agrupacin de puntos acorde al nivel de zoom ............................................................................ 5 2.9 Requisitos para el uso del API de Google ..................................................................................... 5 3 USO DE LA PGINA DESDE LA PERSPECTIVA DEL USUARIO FINAL ............................ 6 3.1 Ingreso a la pgina principal ......................................................................................................... 6 3.2 Uso de la aplicacin de Google Maps con un enfoque personalizado .......................................... 7 3.3 Acercamiento a una ubicacin especfica ..................................................................................... 8 3.4 Visualizacin de Informacin de una ubicacin ......................................................................... 10 3.5 Uso del Street View .................................................................................................................... 11 3.6 Trazo de ruta entre dos ubicaciones ............................................................................................ 12 3.7 Distancia recorrida en kilmetros de la ruta trazada ................................................................... 13 3.8 Distancia en lnea recta entre dos ubicaciones ............................................................................ 13 3.9 Uso de los pasos a seguir en la ruta trazada ................................................................................ 14 3.10 Uso de zoom personalizado ...................................................................................................... 15 4 USO DE LA PGINA DESDE LA PERSPECTIVA DEL DESARROLLADOR ..................... 16 4.1 Ubicacin de las coordenadas que queremos utilizar en nuestra pgina..................................... 16 4.2 Identificar los puntos requeridos dentro del mapa ...................................................................... 17 4.3 Personalizar las imgenes de los marcadores.............................................................................. 19 4.4 Agregar eventos de clic a las imgenes....................................................................................... 20 4.5 Creacin de las pginas para mostrar el detalle de las ubicaciones ............................................ 21 4.6 Creacin de la ventana de informacin del marcador ................................................................. 23 4.7 Trazar la ruta entre dos puntos .................................................................................................... 24 4.8 Uso de zoom personalizado ........................................................................................................ 29 4.9 Uso de MarkerClusterer .............................................................................................................. 29 5 CONCLUSIN ................................................................................................................................ 31

2


1 INTRODUCCIN Se desarrollara una pgina web la cual pueda interactuar con la aplicacin de mapas ofrecida por Google, la cual pueda ubicar diferentes puntos dentro de un territorio a los cuales se pueda acceder de forma rpida y precisa, mostrando informacin relevante del lugar buscado. El lugar mostrado deber poderse ver en vista satelital o en mapa, que es como lo muestra Google Maps. La idea es que cierta empresa o negocio que quiera dar a conocer sus sucursales, pueda ofrecerle al cliente la posibilidad de ubicarlas sin necesidad de entrar directamente a Google Maps y tratar de encontrar el lugar, sino que desde la misma pgina tenga ya ubicadas sus sucursales y acceder a ellas, y ah donde entra el API de Google Maps. Podr hacer uso de funciones avanzadas como trazo de rutas entre puntos, medir distancias, realizar diversos niveles de acercamiento o agrupar puntos para su mejor visualizacin.

3


2 ALCANCES DEL API DE GOOGLE MAPS Google Maps dispone de una amplia matriz de API que permite al usuario insertar las funciones ms completas y la utilidad diaria de Google Maps en su propio sitio web y en sus propias aplicaciones, as como superponer sus propios datos sobre ellas. Algunos de los principales alcances que tiene esta API son las siguientes: 2.1 Posicionamiento mediante latitud y longitud Ofrece la posibilidad de posicionar una o ms ubicaciones dentro de un mapa el cual se muestre el nivel de acercamiento deseado (zoom). La ventaja de esto es que si alguien quiere tener definidas sus empresas, sucursales, lugares favoritos, etc dentro de su pgina, puede hacerlo mediante esta funcin que evita que algn usuario tenga que entrar a la pgina de Google Maps y empezar a buscar y ubicar el lugar que uno quiere que vea. Es una prdida de tiempo y nadie garantiza que vaya a encontrar lo que busca. En cambio si se tienen definidas va a ser mucho ms fcil. 2.2 Tipos de Vista de los mapas Algunos de los tipos de mapas que se pueden usar son: Vista satelital.- Permite tener una visin satelital, esto es al estilo de fotografas para tener la mejor ubicacin. Vista de mapa.- Esta vista es til porque muestra solo las calles y nombres de ellas, permite tener una referencia diferente del lugar Vista hibrida.- Muestra las dos anteriores combinadas, es decir la satelital con los nombres de las calles y lugares. 2.3 Street View Al momento de crear un mapa, esta por default disponible la opcin de street view, la cual nos permite movernos entre las calles con una vista real y tener un panorama ms exacto. 2.4 Ventanas de Informacin Una vez que se ha ubicado algn punto dentro del mapa es posible agregar el evento de que si se da clic en el punto, aparezca una ventana de informacin con los datos relevantes del ese punto, como lo pueden ser nombre del lugar, direccin, telfono, enlace a otra pgina, etc. Se puede agregar alguna imagen para que se tenga una idea de cmo es el lugar buscado por fuera. Esto es muy til si se quiere tener una perspectiva rpida de algn punto, sin entrar a tantos detalles, pero eso si con la posibilidad de llamar a las partes con ms detalles. 2.5 Imgenes de puntos personalizadas Cuando se ubica algn punto dentro del mapa, este aparece con un icono por default el cual es el que se ve en todas las pginas que mandar llamar a los mapas de Google. Con esta funcin podemos personalizar la imagen de ya sea con el mismo nombre del lugar para que sea ms rpido encontrar, el logotipo, algn numero etc. Para as encontrar ms rpido lo que se busca.

4


2.6 Servicio de Direcciones Este servicio est muy completo porque permite trazar la ruta entre dos o ms puntos dentro de un mapa. Se configuran los puntos de origen y los de destino, se llama al servicio de direcciones y este trazara una ruta dependiendo del mtodo de recorrido, por ejemplo, si se selecciona el mtodo de automvil, trazara la ruta tomando en cuenta el sentido de las calles, si se usa el de bicicleta ser ms rpido porque no abra sentidos, o si se usa el de caminar trazara otra ruta. Al momento de que se traza una ruta, el servicio tambin permite poner un panel en el cual se ponen los puntos ms relevantes del recorrido del origen A hacia el destino B, por ejemplo pondr que el nmero 1 es dar vuelta a la izquierda en tal calle, numero 2 seguir derecho por tal calle hasta llegar a otra, hasta llegar al punto B. Tambin incorpora la funcin de que si se le da clic en algn numero del panel, automticamente posicionara el mapa con una ventana de informacin el punto elegido. 2.7 Funcin de zoom personalizado Este mtodo es til cuando se est buscando algo dentro del mapa, o se quiere llegar rpido a un rea especfica, sin tener que estar dando scroll al ratn o darle clic en el botn de acercar zoom, tal solo con presionar una tecla del teclado y con el cursor del ratn generar un cuadro de la parte que se quiere explorar, el mapa se posicionara en el mximo zoom para esa rea que sea visible. 2.8 Agrupacin de puntos acorde al nivel de zoom Es bastante til cuando se tienen muchos puntos ubicados o muy cercanos, con este mtodo si se est a un nivel de zoom muy elevado, los puntos se agruparan mostrando un numero con el total de puntos dentro de esa rea, si se da clic en ese nmero dividir otra vez a un nivel de zoom ms cercano y generando otros nmeros que pueden estar agrupados, o mostrando el punto ya solo en caso de que ya sea visible por si solo sin empalmarse con otro. 2.9 Requisitos para el uso del API de Google Si se usa la versin V3 que es la que manejaremos aqu, ya no se requiere una clave o key la cual era necesaria en la versin 2, la cual ya esta despreciada. As que solo har falta entrar a la documentacin para ir aprendiendo lo que se puede hacer con el API. Para hacer uso del API solo hay que entrar a la pgina http://code.google.com/intl/es419/apis/maps/documentation/javascript/tutorial.html donde est la documentacin requerida para poder personalizar el uso de los mapas.

5


3 USO DE LA PGINA DESDE LA PERSPECTIVA DEL USUARIO FINAL 3.1 Ingreso a la pgina principal Se entra en la direccin http://jhernandezr.comxa.com/ para poder ver la pgina principal desde donde veremos el uso del API de Google Maps versin 3.

Una vez de haber entrado en la pgina se da clic en la parte que dice facultades para que nos pase a la parte desde donde empezaremos a usar los mapas.

6


3.2 Uso de la aplicacin de Google Maps con un enfoque personalizado Una vez en la pgina del mapa principal aparecen tres puntos establecidos previamente dentro de la pgina de Google Maps, los dos primeros son una agrupacin de varias facultades, el otro debido a que est muy retirado de los dems, aparece solo. El icono con el numero 5 representa las facultades del campus nuevo de la UACH, el del 7 las del campus viejo y el otro punto es la facultad de Zootecnia.

Si se le da clic al 5 har un acercamiento hacia las facultades correspondientes. En este caso las facultades de Contadura y Administracin, Ingeniera, Qumicas, Enfermera y Nutriologa y Medicina.

7


3.3 Acercamiento a una ubicacin especfica Supongamos que se quiere ir directamente a la Facultad de Ingeniera sin necesidad de estar acercando mediante el zoom, para esto basta con dar un clic en el icono de la Facultad de Ingeniera.

8


La pagina se mostrara a un nivel bastante cerca en el cual se puede apreciar mejor la facultad, as como sus calles ms cercanas, aqu por default aparece en la vista satelital pero de igual forma se puede cambiar a la vista de mapa en el botn de Mapa.

9


3.4 Visualizacin de Informacin de una ubicacin Estando en la pgina anterior, es decir en la pgina que aparece con la facultad ya de cerca, se le da clic al icono de Ingeniera.

Esta vez en lugar de llamar a otra pgina, mostrara la informacin bsica de la ubicacin elegida, como lo es Direccin, Telfono, Estado y Municipio, as como una imagen ms detallada del lugar.

10


3.5 Uso del Street View De igual manera que en la pgina de Google Maps, se puede hacer uso del Street View para tener una vista ms detallada y cerca de la ubicacin buscada, para esto se da clic en el icono del monito amarillo situado en la parte lateral izquierda y se arrastra hacia el mapa hacia una parte permitida que tenga datos de Street View.

1.

Se selecciona el monito amarillo y se deja presionado

2. Se arrastra el monito a un rea permitida (una lnea coloreada en azul). 3. Se coloca el crculo punteado verde en el rea que se quiere poner la vista de Street View.

4. Vista del Street View con los controles para girar la vista panormica.

11


3.6 Trazo de ruta entre dos ubicaciones Estando en la pgina donde se encuentran las tres ubicaciones hay unas etiquetas en la parte de arriba que dicen Origen y Destino, cada una contiene las tres opciones disponibles. Por ejemplo si se quiere ver la ruta desde la Facultad de Ingeniera hasta Rectora, en Origen se selecciona Ingeniera y en Destino Rectora.

Despus se da clic en el botn de Dibujar Ruta.

El solo hecho de dar clic en este botn nos va a indicar muchas cosas. En primer lugar va a trazar una lnea morada de la ruta a seguir desde el origen hasta el destino en carro, esto quiere decir que toma en cuenta el sentido de las calles para el trazo de la ruta, y por lo tanto la ruta de Ingeniera a Rectora podra ser diferente que la ruta de Rectora a Ingeniera. Ruta de Ingeniera a Rectora Ruta de Rectora a Ingeniera

12


3.7 Distancia recorrida en kilmetros de la ruta trazada Tras haber dado clic en el icono de Dibujar Ruta se da clic en el icono de Distancia Total recorrida en caso de viajar en un automvil.

Al dar clic mostrara un aviso con la distancia total. De Ingeniera a Rectora.

De Rectora a Ingeniera.

3.8 Distancia en lnea recta entre dos ubicaciones Tras haber dado clic en el icono de Dibujar Ruta se da clic en el icono de Distancia Recta.

Al dar clic mostrara un aviso con la distancia total.

13


3.9 Uso de los pasos a seguir en la ruta trazada Como se mencion anteriormente al darle clic al botn de Dibujar Ruta se hacen varia cosas a la vez, adems de dibujar la ruta, pone un panel en el lado izquierdo con los pasos a seguir por la ruta Como se aprecia, muestra el punto de origen como el punto A y el punto destino como el punto B. Ofrece tambin en esta parte la distancia recorrida en vehculo y el tiempo estimado que se hara. A su vez muestra la referencia geogrfica del punto A y B. Muestra la distancia recorrida en cada paso Y otra cosa muy til es que si se le da clic en alguno de los puntos listados, nos posicionara en el mapa con una indicacin de donde es ese punto exactamente en la ruta trazada. Resultado de darle clic al punto 6

14


3.10 Uso de zoom personalizado Se presiona la tecla shift del teclado y se dibuja con el cursor del ratn un cuadrado (para que el rea seleccionada sea ms exacta).

Se suelta la tecla shift y tambin el cursor del ratn y aparecer esa rea acercada.

15


4 USO DE LA PGINA DESDE LA PERSPECTIVA DEL DESARROLLADOR 4.1 Ubicacin de las coordenadas que queremos utilizar en nuestra pgina Se entra en la pgina de Google Maps y se sitan los puntos exactos que estamos buscando, en este ejemplo y por cuestiones de la pagina se escogern tres puntos, La Facultad de Ingeniera, La Facultad de Derecho y Rectora.

Una vez ubicada la Facultad de Ingeniera hay cuatro puntos a considerar para sacar bien las coordenadas. 1. El panel lateral de la pgina de Google Maps debe de estar visible, para que nos d un nmero de coordenadas preciso. 2. Se da clic derecho exactamente donde queremos establecer el punto central de la Facultad. 3. En el men contextual que aparece se da clic en Center map here. 4. Se da clic en el icono de la cadena para que aparezca la parte que necesitamos. En esta parte vamos a buscar las coordenadas que se encuentran en el parmetro ll, que son las que vamos a utilizar para ubicar los puntos que queremos.

16


4.2 Identificar los puntos requeridos dentro del mapa Una vez que se tengan los tres puntos identificados se van a utilizar en la pgina de abajo donde se van a crear los marcadores mediante las coordenadas que se pasen. En esta parte destacan llCentro que es una coordenada extra que sacamos para centrar el mapa donde queremos que se muestren las facultades. Zoom que es el que indica el nivel de acercamiento de nuestro mapa donde se alcancen a ver los tres puntos que queremos ver, este valor varia depende de que tan retirados estn los puntos, por eso hay que hacer pruebas hasta tener el que ms se ajuste. html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } function initialize() { var llCentro= new google.maps.LatLng(28.656060,-106.088727); var myOptions = { zoom: 12, center: llCentro, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //Declaracion de marcadores var llIngenieria = new google.maps.LatLng(28.703763,-106.139174); var mIngenieria = new google.maps.Marker({ position: llIngenieria, map: map, title:"FACULTAD DE INGENIERIA" }); var llDerecho = new google.maps.LatLng(28.656060,-106.088727); var mDerecho = new google.maps.Marker({ position: llDerecho, map: map,

17


title:"FACULTAD DE DERECHO" }); var llRectoria= new google.maps.LatLng(28.638171,-106.072290); var mRectoria = new google.maps.Marker({ position: llRectoria, map: map, title:"RECTORIA" }); }

Con el solo hecho de pegar el cdigo anterior en un archivo de texto, ya sea de el bloc de notas o de algn editor ms avanzado y nombrarlo con una extensin .html, por ejemplo, facultades.html al abrirlo con un navegador debe de mostrar la pgina siguiente, esto siempre y cuando haya conexin a internet, ya que el servicio de los mapas viene directamente de los servidores de Google.

18


Como se puede ver ya contamos con lo esencial de los mapas, lo que es el nivel de acercamiento, la vista de mapa y la vista satelital.

4.3 Personalizar las imgenes de los marcadores Se deben crear primeramente las imgenes que se quieran mostrar como tipo png, esto es porque este formato permite guardar transparencias, al cdigo se le agregaran las siguientes lneas en negrita, las cuales indican que al mismo nivel en que se encuentra el archivo facultades.html hay una carpeta que se llama images, dentro de esta una carpeta que se llama icons y dentro de esta carpeta tres imgenes, ingeniera.png, derecho.png y rectora.png. var llIngenieria = new google.maps.LatLng(28.703763,-106.139174); var imgIngenieria = "./images/icons/ingenieria.png"; var mIngenieria = new google.maps.Marker({ position: llIngenieria, map: map, title:"FACULTAD DE INGENIERIA", draggable: false, icon: imgIngenieria }); var llDerecho = new google.maps.LatLng(28.656060,-106.088727); var imgDerecho = "./images/icons/derecho.png"; var mDerecho = new google.maps.Marker({ position: llDerecho, map: map, title:"FACULTAD DE DERECHO", draggable: false, icon: imgDerecho });

var llRectoria= new google.maps.LatLng(28.638171,-106.072290); var imgRectoria = "./images/icons/rectoria.png"; var mRectoria = new google.maps.Marker({ position: llRectoria, map: map, title:"RECTORIA", draggable: false, icon: imgRectoria });

19


Modificar el cdigo y pegar las imgenes descritas, la pgina sustituir los iconos default por las imgenes personalizadas

4.4 Agregar eventos de clic a las imgenes Debajo de la seccin donde se declararon los marcadores se agregan los eventos a los marcadores, esto estando aun en la funcin principal de initialize(). //Declaracion de eventos de click google.maps.event.addListener(mIngenieria,'click', function(){ window.location.href = "./ingenieria.html"; }); google.maps.event.addListener(mDerecho,'click', function(){ window.location.href = "./derecho.html"; }); google.maps.event.addListener(mRectoria,'click', function(){ window.location.href = "./rectoria.html"; });

Aqu lo que se est diciendo es que al marcador mIngenieria se le va a agregar el evento del click el cual al ejecutarse va abrir una pgina llamada ingeniera.html la cual va a estar en el mismo nivel que la pagina de facultades.html, de igual forma para los otros dos marcadores.

20


4.5 Creacin de las pginas para mostrar el detalle de las ubicaciones ingeniera.html Facultades function initialize() { var llCentro= new google.maps.LatLng(28.703763,-106.139174); var myOptions = { zoom: 17, center: llCentro, mapTypeId: google.maps.MapTypeId.HYBRID };

/*Declaracin del mapa principal*/ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); /*Declaracion de marcadores*/ var llIngenieria = new google.maps.LatLng(28.703763,-106.139174); var imgIngenieria = "./images/icons/ingenieria.png"; var mIngenieria = new google.maps.Marker({ position: llIngenieria, map: map, title:"FACULTAD DE INGENIERIA", draggable: false, icon: imgIngenieria }); }

21


Esta parte es un parte de la pgina de facultades.html, solo que va a ser nica para ingeniera y va a tener el centro en ingeniera y un nivel de zoom ms grande para ver ms a detalle la facultad.

Las pginas de derecho.html y rectora.html son iguales, lo nico que cambia es la parte que est en negrita, la cual se sustituye por lo que corresponde a derecho o a rectora. Teniendo estos tres archivos listos, cuando en la pgina de facultades.html se le de click al marcador de ingeniera, es decir a la imagen de ingeniera, va mandar llamar a la pgina de ingeniera.html, la cual va a mostrar la facultad desde ms cerca.

22


4.6 Creacin de la ventana de informacin del marcador Ahora estando en la pgina de ingeniera.html en lugar de darle un evento de click al icono para mostrar alguna pgina, se le va a dar la funcionalidad de mostrar una ventana de informacin con los detalles. Para esto se debe agregar el siguiente cdigo debajo de la declaracin de los marcadores var contentString = ''+ ''+ ''+ ''+ 'FACULTAD DE INGENIERIA'+ ''+ 'Circuito Universitario Campus II
'+ 'Tel. (614) 442-9500
'+ 'Chihuahua, Chih.'+ ''+ ''+ ''; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(mIngenieria, 'click', function() { infowindow.open(map,mIngenieria); }); La variable contentString es la que va a contener una serie de sentencias html, principalmente un div el cual contendr tanto la imagen que se le va asignar y los datos como telfono y direccin. La imagen segn se est llamando se encuentra en la carpeta images la cual este en el mismo nivel que el archivo ingeniera.html, dentro de esta carpeta una llamada small_facultades y dentro de esta una imagen llamada ingeniera.jpg.

23


Al hacer click ahora en el icono de ingeniera va a desplegar una ventana de informacin.

4.7 Trazar la ruta entre dos puntos Estando de nuevo en el archivo facultades.html, se va a agregar la funcionalidad de escoger un origen y un destino para posteriormente trazar una ruta. Se van a agregar botones para calcular la distancia recta y otro para la distancia, as como un panel lateral en el cual se van a mostrar los datos relevantes a la ruta trazada.

1 var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { 2 directionsDisplay = new google.maps.DirectionsRenderer(); var llCentro= new google.maps.LatLng(28.656060,-106.088727); var myOptions = { zoom: 12, center: llCentro, mapTypeId: google.maps.MapTypeId.ROADMAP };

24


map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 3 directionsDisplay.setMap(map); //Declaracion de marcadores

var llIngenieria = new google.maps.LatLng(28.703763,-106.139174); var imgIngenieria = "./images/icons/ingenieria.png"; var mIngenieria = new google.maps.Marker({ position: llIngenieria, map: map, title:"FACULTAD DE INGENIERIA", draggable: false, icon: imgIngenieria }); var llDerecho = new google.maps.LatLng(28.656060,-106.088727); var imgDerecho = "./images/icons/derecho.png"; var mDerecho = new google.maps.Marker({ position: llDerecho, map: map, title:"FACULTAD DE DERECHO", draggable: false, icon: imgDerecho }); var llRectoria= new google.maps.LatLng(28.638171,-106.072290); var imgRectoria = "./images/icons/rectoria.png"; var mRectoria = new google.maps.Marker({ position: llRectoria, map: map, title:"RECTORIA", draggable: false, icon: imgRectoria }); //Declaracion de eventos de click google.maps.event.addListener(mIngenieria,'click', function(){ window.location.href = "./ingenieria.html"; }); google.maps.event.addListener(mDerecho,'click', function(){ window.location.href = "./derecho.html"; }); google.maps.event.addListener(mRectoria,'click', function(){ window.location.href = "./rectoria.html";

25


}); } 4 function calcRoute(modo) { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { if (modo == "ruta") directionsDisplay.setDirections(result); if (modo == "total"){ var distTotal = result.routes[0].legs[0].distance.text; alert(distTotal); } } }); 5 directionsDisplay.setPanel(document.getElementById("directionsPanel")); } 6 function mensaje(){ var inicio = document.getElementById("start").value; var fin = document.getElementById("end").value; var lat1 = inicio.substring(0,9); var lon1 = inicio.substring(10); var lat2 = fin.substring(0,9); var lon2 = fin.substring(10); var nyc = new google.maps.LatLng(lat1,lon1); var london = new google.maps.LatLng(lat2,lon2); var distancia2 = google.maps.geometry.spherical.computeDistanceBetween(nyc, london); alert(distancia2/1000 + " Km."); } 7 Origen: Ingenieria Derecho Rectoria

26


Destino: Ingenieria Derecho Rectoria Dibujar Ruta Distancia Recta Distancia Total 8 En el cdigo de arriba las partes que estn con negrita son las que se le agregan al archivo facultades.html para que pueda mostrar las rutas, mediante el uso del servicio de direcciones de Google. 1.- Se declaran tres variables globales para poder hacer uso de ellas en el cdigo de javaScript 2.- A la variable directionsDisplay se le agrega la funcionalidad de describir los puntos usados en una ruta dada, describiendo mediante nmeros los puntos clave de la ruta. 3.- Se le dice que el mapa principal va a tener la funcin de directionsDisplay.

4.- Esta es la funcin que va a trazar la ruta mediante los parmetros pasados en origen y destino, va a calcular la distancia recorrida si se fuera manejando, ya que se est haciendo uso de la modalidad DRIVING. Tambin realiza el trazo de los puntos en el panel derecho.

27


5.- Aqu es donde explcitamente dentro de la funcin calcRoute() se pasan los datos al panel. 6.- Esta funcin es la que se encarga de medir la distancia recta entre los dos puntos dados, mostrndola en Kilmetros.

7.- Este es el div superior el cual contiene los botones necesarios para realizar los clculos, como lo son los selectores de origen y destino, el botn de trazar ruta, medir distancia recorrida y medir distancia recta. En esta parte es donde se hace el llamado a las distintas funciones desde los botones.

8.- Aqu se declara el div derecho el cual va a ser el panel donde se muestren los puntos clave con descripcin de la ruta obtenida.

28


4.8 Uso de zoom personalizado Para habilitar el uso de la funcin de trazar un cuadro selector mediante la tecla shift se necesitan dos cosas: 1.- Hacer referencia al archivo keydragzoom.js que debemos tener en nuestra carpeta js (esta carpeta se encuentra a la altura del archivo facultades.html, dicha carpeta hay que crearla) donde tenemos guardados los archivos de javascript, dicha referencia se agrega en el header de nuestra pgina. 2.- Dentro de la funcion initialize se agrega la siguiente lnea de cdigo para habilitar en el mapa la funcin del zoom map.enableKeyDragZoom(); 4.9 Uso de MarkerClusterer El uso de esta funcin es para hacer que los iconos se agrupen si el zoom est muy elevado, generando automticamente nmeros con el total de los iconos o ubicaciones que agrupo. Para esto se necesitan cuatro cosas: 1.- Hacer referencia al archivo keydragzoom.js que debemos tener en nuestra carpeta js donde tenemos guardados los archivos de javascript, dicha referencia se agrega en el header de nuestra pgina. 2.- Dentro de la function initialize se declara la variable markers de tipo arreglo var markers = []; 3.Despus de cada declaracin de marcadores se agrega markers.push(nombredelmarcadordeclarado), por ejemplo para el de ingeniera seria: var llIngenieria = new google.maps.LatLng(28.703763,-106.139174); var imgIngenieria = "images/icons/ingenieria.png"; var mIngenieria = new google.maps.Marker({ position: llIngenieria, map: map, title:"FACULTAD DE INGENIERIA", draggable: false, icon: imgIngenieria }); markers.push(mIngenieria);

29


4.- Despus de haber agregado todos los marcadores a la variable markers mediante el mtodo push, se agrega la siguiente lnea de cdigo para crear el MarkerCluster con los marcadores que tenemos en la pgina. var markerCluster = new MarkerClusterer(map, markers);

30


5 CONCLUSIN Se han demostrado los alcances del API de Google Maps para la personalizacin de una pgina que est diseada para un objetivo en especfico. Haciendo uso de algunas de las funciones de esta API, demostrando que de una manera muy sencilla y con pocas lneas de cdigo se pueden lograr cosas muy interesantes, ya que la parte difcil ya est programada por Google y solo es cuestin de hacer uso de nuestra imaginacin para saber cmo reunirlas y adaptarlas a las necesidades.

31

proyecto aplicación de google maps

Documents