UNIVERSIDAD AUTONOMA DE CHIHUAHUA

FACULTAD DE INGENIERIA

PROYECTOS PROFESIONALES 1

API DE GOOGLE MAPS V3

Equipo 7 Ceres Valles Ramírez Israel Torres Orozco Francisco Molina Jaime Jesús Ignacio Hernández Rodríguez

Facultad de Ingeniería UACH Proyectos Profesionales 1

Contenido
1 INTRODUCCIÓN ............................................................................................................................. 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 Información .............................................................................................................. 4 2.5 Imágenes de puntos personalizadas .............................................................................................. 4 2.6 Servicio de Direcciones ................................................................................................................ 5 2.7 Función de zoom personalizado.................................................................................................... 5 2.8 Agrupación de puntos acorde al nivel de zoom ............................................................................ 5 2.9 Requisitos para el uso del API de Google ..................................................................................... 5 3 USO DE LA PÁGINA DESDE LA PERSPECTIVA DEL USUARIO FINAL ............................ 6 3.1 Ingreso a la página principal ......................................................................................................... 6 3.2 Uso de la aplicación de Google Maps con un enfoque personalizado .......................................... 7 3.3 Acercamiento a una ubicación específica ..................................................................................... 8 3.4 Visualización de Información de una ubicación ......................................................................... 10 3.5 Uso del Street View .................................................................................................................... 11 3.6 Trazo de ruta entre dos ubicaciones ............................................................................................ 12 3.7 Distancia recorrida en kilómetros de la ruta trazada ................................................................... 13 3.8 Distancia en línea 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 PÁGINA DESDE LA PERSPECTIVA DEL DESARROLLADOR ..................... 16 4.1 Ubicación de las coordenadas que queremos utilizar en nuestra página..................................... 16 4.2 Identificar los puntos requeridos dentro del mapa ...................................................................... 17 4.3 Personalizar las imágenes de los marcadores.............................................................................. 19 4.4 Agregar eventos de clic a las imágenes....................................................................................... 20 4.5 Creación de las páginas para mostrar el detalle de las ubicaciones ............................................ 21 4.6 Creación de la ventana de información 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 CONCLUSIÓN ................................................................................................................................ 31

2

Facultad de Ingeniería UACH Proyectos Profesionales 1

1 INTRODUCCIÓN Se desarrollara una página web la cual pueda interactuar con la aplicación de mapas ofrecida por Google, la cual pueda ubicar diferentes puntos dentro de un territorio a los cuales se pueda acceder de forma rápida y precisa, mostrando información 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 página 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 visualización.

3

etc dentro de su página..Esta vista es útil porque muestra solo las calles y nombres de ellas. 2. lugares favoritos. Vista de mapa. esto es al estilo de fotografías para tener la mejor ubicación. así como superponer sus propios datos sobre ellas. dirección. etc. sin entrar a tantos detalles. el logotipo.. la cual nos permite movernos entre las calles con una vista real y tener un panorama más exacto. Para así encontrar más rápido lo que se busca. permite tener una referencia diferente del lugar Vista hibrida. Es una pérdida de tiempo y nadie garantiza que vaya a encontrar lo que busca. Con esta función podemos personalizar la imagen de ya sea con el mismo nombre del lugar para que sea más rápido encontrar. esta por default disponible la opción de street view.2 Tipos de Vista de los mapas Algunos de los tipos de mapas que se pueden usar son: Vista satelital. teléfono. este aparece con un icono por default el cual es el que se ve en todas las páginas que mandar llamar a los mapas de Google.1 Posicionamiento mediante latitud y longitud Ofrece la posibilidad de posicionar una o más ubicaciones dentro de un mapa el cual se muestre el nivel de acercamiento deseado (zoom). algún numero etc.Permite tener una visión satelital. Esto es muy útil si se quiere tener una perspectiva rápida de algún punto.. es decir la satelital con los nombres de las calles y lugares. aparezca una ventana de información con los datos relevantes del ese punto.Muestra las dos anteriores combinadas. puede hacerlo mediante esta función que evita que algún usuario tenga que entrar a la página de Google Maps y empezar a buscar y ubicar el lugar que uno quiere que vea. sucursales. La ventaja de esto es que si alguien quiere tener definidas sus empresas.4 Ventanas de Información Una vez que se ha ubicado algún punto dentro del mapa es posible agregar el evento de que si se da clic en el punto. Se puede agregar alguna imagen para que se tenga una idea de cómo es el lugar buscado por fuera.5 Imágenes de puntos personalizadas Cuando se ubica algún punto dentro del mapa. En cambio si se tienen definidas va a ser mucho más fácil.3 Street View Al momento de crear un mapa.Facultad de Ingeniería UACH Proyectos Profesionales 1 2 ALCANCES DEL API DE GOOGLE MAPS Google Maps dispone de una amplia matriz de API que permite al usuario insertar las funciones más completas y la utilidad diaria de Google Maps en su propio sitio web y en sus propias aplicaciones. 2. pero eso si con la posibilidad de llamar a las partes con más detalles. enlace a otra página. Algunos de los principales alcances que tiene esta API son las siguientes: 2. 2. 2. 4 . como lo pueden ser nombre del lugar.

html donde está la documentación requerida para poder personalizar el uso de los mapas.7 Función de zoom personalizado Este método es útil cuando se está buscando algo dentro del mapa. si se selecciona el método de automóvil. por ejemplo pondrá que el número 1 es dar vuelta a la izquierda en tal calle. 2.8 Agrupación de puntos acorde al nivel de zoom Es bastante útil cuando se tienen muchos puntos ubicados o muy cercanos.Facultad de Ingeniería UACH Proyectos Profesionales 1 2.6 Servicio de Direcciones Este servicio está muy completo porque permite trazar la ruta entre dos o más puntos dentro de un mapa. o si se usa el de caminar trazara otra ruta. hasta llegar al punto B. numero 2 seguir derecho por tal calle hasta llegar a otra. automáticamente posicionara el mapa con una ventana de información el punto elegido. 2. se llama al servicio de direcciones y este trazara una ruta dependiendo del método de recorrido. si se usa el de bicicleta será más rápido porque no abra sentidos.com/intl/es419/apis/maps/documentation/javascript/tutorial. Se configuran los puntos de origen y los de destino. o se quiere llegar rápido a un área específica. tal solo con presionar una tecla del teclado y con el cursor del ratón generar un cuadro de la parte que se quiere explorar. trazara la ruta tomando en cuenta el sentido de las calles. ya no se requiere una clave o key la cual era necesaria en la versión 2.google. 2. si se da clic en ese número dividirá otra vez a un nivel de zoom más cercano y generando otros números que pueden estar agrupados. el mapa se posicionara en el máximo zoom para esa área que sea visible. el servicio también permite poner un panel en el cual se ponen los puntos más relevantes del recorrido del origen A hacia el destino B. 5 . Para hacer uso del API solo hay que entrar a la página http://code. Así que solo hará falta entrar a la documentación para ir aprendiendo lo que se puede hacer con el API. los puntos se agruparan mostrando un numero con el total de puntos dentro de esa área. También incorpora la función de que si se le da clic en algún numero del panel. la cual ya esta despreciada. por ejemplo. o mostrando el punto ya solo en caso de que ya sea visible por si solo sin empalmarse con otro. Al momento de que se traza una ruta. con este método si se está a un nivel de zoom muy elevado.9 Requisitos para el uso del API de Google Si se usa la versión V3 que es la que manejaremos aquí. sin tener que estar dando scroll al ratón o darle clic en el botón de acercar zoom.

comxa. 6 . Una vez de haber entrado en la página se da clic en la parte que dice facultades para que nos pase a la parte desde donde empezaremos a usar los mapas.com/ para poder ver la página principal desde donde veremos el uso del API de Google Maps versión 3.Facultad de Ingeniería UACH Proyectos Profesionales 1 3 USO DE LA PÁGINA DESDE LA PERSPECTIVA DEL USUARIO FINAL 3.1 Ingreso a la página principal Se entra en la dirección http://jhernandezr.

aparece solo. El icono con el numero 5 representa las facultades del campus nuevo de la UACH.2 Uso de la aplicación de Google Maps con un enfoque personalizado Una vez en la página del mapa principal aparecen tres puntos establecidos previamente dentro de la página de Google Maps. Ingeniería. el otro debido a que está muy retirado de los demás. En este caso las facultades de Contaduría y Administración.Facultad de Ingeniería UACH Proyectos Profesionales 1 3. los dos primeros son una agrupación de varias facultades. Enfermería y Nutriología y Medicina. Si se le da clic al 5 hará un acercamiento hacia las facultades correspondientes. 7 . Químicas. el del 7 las del campus viejo y el otro punto es la facultad de Zootecnia.

3 Acercamiento a una ubicación específica Supongamos que se quiere ir directamente a la Facultad de Ingeniería sin necesidad de estar acercando mediante el zoom. para esto basta con dar un clic en el icono de la Facultad de Ingeniería. 8 .Facultad de Ingeniería UACH Proyectos Profesionales 1 3.

Facultad de Ingeniería UACH Proyectos Profesionales 1 La pagina se mostrara a un nivel bastante cerca en el cual se puede apreciar mejor la facultad. así como sus calles más cercanas. 9 . aquí por default aparece en la vista satelital pero de igual forma se puede cambiar a la vista de mapa en el botón de Mapa.

Estado y Municipio. así como una imagen más detallada del lugar. se le da clic al icono de Ingeniería. 10 . como lo es Dirección. es decir en la página que aparece con la facultad ya de cerca.Facultad de Ingeniería UACH Proyectos Profesionales 1 3. Esta vez en lugar de llamar a otra página. mostrara la información básica de la ubicación elegida.4 Visualización de Información de una ubicación Estando en la página anterior. Teléfono.

1. 11 . se puede hacer uso del Street View para tener una vista más detallada y cerca de la ubicación buscada. 4. 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. Vista del Street View con los controles para girar la vista panorámica. Se arrastra el monito a un área permitida (una línea coloreada en azul). 3.5 Uso del Street View De igual manera que en la página de Google Maps. Se selecciona el monito amarillo y se deja presionado 2. Se coloca el círculo punteado verde en el área que se quiere poner la vista de Street View.Facultad de Ingeniería UACH Proyectos Profesionales 1 3.

y por lo tanto la ruta de Ingeniería a Rectoría podría ser diferente que la ruta de Rectoría a Ingeniería. cada una contiene las tres opciones disponibles. Después se da clic en el botón de Dibujar Ruta. esto quiere decir que toma en cuenta el sentido de las calles para el trazo de la ruta. en Origen se selecciona Ingeniería y en Destino Rectoría. Por ejemplo si se quiere ver la ruta desde la Facultad de Ingeniería hasta Rectoría. En primer lugar va a trazar una línea morada de la ruta a seguir desde el origen hasta el destino en carro.Facultad de Ingeniería UACH Proyectos Profesionales 1 3. El solo hecho de dar clic en este botón nos va a indicar muchas cosas. Ruta de Ingeniería a Rectoría Ruta de Rectoría a Ingeniería 12 .6 Trazo de ruta entre dos ubicaciones Estando en la página donde se encuentran las tres ubicaciones hay unas etiquetas en la parte de arriba que dicen Origen y Destino.

13 . De Rectoría a Ingeniería.8 Distancia en línea 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.Facultad de Ingeniería UACH Proyectos Profesionales 1 3. De Ingeniería a Rectoría. 3. Al dar clic mostrara un aviso con la distancia total.7 Distancia recorrida en kilómetros 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 automóvil.

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. Ofrece también en esta parte la distancia recorrida en vehículo y el tiempo estimado que se haría. A su vez muestra la referencia geográfica del punto A y B. además de dibujar la ruta. muestra el punto de origen como el punto A y el punto destino como el punto B.9 Uso de los pasos a seguir en la ruta trazada Como se mencionó anteriormente al darle clic al botón de Dibujar Ruta se hacen varia cosas a la vez. pone un panel en el lado izquierdo con los pasos a seguir por la ruta Como se aprecia. Resultado de darle clic al punto 6 14 . nos posicionara en el mapa con una indicación de donde es ese punto exactamente en la ruta trazada.Facultad de Ingeniería UACH Proyectos Profesionales 1 3.

Se suelta la tecla shift y también el cursor del ratón y aparecerá esa área acercada.Facultad de Ingeniería UACH Proyectos Profesionales 1 3.10 Uso de zoom personalizado Se presiona la tecla shift del teclado y se dibuja con el cursor del ratón un cuadrado (para que el área seleccionada sea más exacta). 15 .

En el menú contextual que aparece se da clic en Center map here. 1. Una vez ubicada la Facultad de Ingeniería hay cuatro puntos a considerar para sacar bien las coordenadas. que son las que vamos a utilizar para ubicar los puntos que queremos. Se da clic en el icono de la cadena para que aparezca la parte que necesitamos. en este ejemplo y por cuestiones de la pagina se escogerán tres puntos. Se da clic derecho exactamente donde queremos establecer el punto central de la Facultad. 16 . 4. La Facultad de Derecho y Rectoría. 3. 2. El panel lateral de la página de Google Maps debe de estar visible.1 Ubicación de las coordenadas que queremos utilizar en nuestra página Se entra en la página de Google Maps y se sitúan los puntos exactos que estamos buscando. La Facultad de Ingeniería. para que nos dé un número de coordenadas preciso.Facultad de Ingeniería UACH Proyectos Profesionales 1 4 USO DE LA PÁGINA DESDE LA PERSPECTIVA DEL DESARROLLADOR 4. En esta parte vamos a buscar las coordenadas que se encuentran en el parámetro ll.

maps.2 Identificar los puntos requeridos dentro del mapa Una vez que se tengan los tres puntos identificados se van a utilizar en la página de abajo donde se van a crear los marcadores mediante las coordenadas que se pasen.LatLng(28.google.656060.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> function initialize() { var llCentro= new google.MapTypeId.656060. user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%.0. var mIngenieria = new google.703763.maps.maps. map = new google.088727).LatLng(28. var llDerecho = new google.getElementById("map_canvas").-106.maps. margin: 0px. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.maps. 17 .Marker({ position: llIngenieria. map: map. var myOptions = { zoom: 12.-106.maps.ROADMAP }.Marker({ position: llDerecho.maps.139174).088727). myOptions).Facultad de Ingeniería UACH Proyectos Profesionales 1 4. este valor varia depende de que tan retirados estén los puntos. center: llCentro. padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps. por eso hay que hacer pruebas hasta tener el que más se ajuste. //Declaracion de marcadores var llIngenieria = new google. En esta parte destacan llCentro que es una coordenada extra que sacamos para centrar el mapa donde queremos que se muestren las facultades. var mDerecho = new google. map: map. mapTypeId: google.Map(document.LatLng(28.-106. Zoom que es el que indica el nivel de acercamiento de nuestro mapa donde se alcancen a ver los tres puntos que queremos ver. title:"FACULTAD DE INGENIERIA" }).

18 .Marker({ position: llRectoria. ya que el servicio de los mapas viene directamente de los servidores de Google.maps.Facultad de Ingeniería UACH Proyectos Profesionales 1 title:"FACULTAD DE DERECHO" }).html. var llRectoria= new google.072290). ya sea de el bloc de notas o de algún editor más avanzado y nombrarlo con una extensión . map: map. por ejemplo.-106. height:100%"></div> </body> </html> Con el solo hecho de pegar el código anterior en un archivo de texto.maps. facultades.html al abrirlo con un navegador debe de mostrar la página siguiente. esto siempre y cuando haya conexión a internet. } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%.LatLng(28.638171. var mRectoria = new google. title:"RECTORIA" }).

Marker({ position: llRectoria.703763. ingeniería.Marker({ position: llDerecho.png y rectoría.LatLng(28.-106. var mRectoria = new google. 4. derecho. var mIngenieria = new google.088727)./images/icons/ingenieria. lo que es el nivel de acercamiento./images/icons/derecho. draggable: false.Facultad de Ingeniería UACH Proyectos Profesionales 1 Como se puede ver ya contamos con lo esencial de los mapas. las cuales indican que al mismo nivel en que se encuentra el archivo facultades. var llDerecho = new google.-106. map: map. icon: imgRectoria }).png. var llRectoria= new google. la vista de mapa y la vista satelital.maps. dentro de esta una carpeta que se llama icons y dentro de esta carpeta tres imágenes. map: map.LatLng(28. var imgDerecho = ".638171. esto es porque este formato permite guardar transparencias. var mDerecho = new google. title:"FACULTAD DE DERECHO".656060.Marker({ position: llIngenieria. icon: imgIngenieria }). var llIngenieria = new google. var imgRectoria = "./images/icons/rectoria.png.LatLng(28.png". 19 .maps. icon: imgDerecho }).072290). title:"FACULTAD DE INGENIERIA".maps.png". al código se le agregarían las siguientes líneas en negrita.maps.139174).maps.3 Personalizar las imágenes de los marcadores Se deben crear primeramente las imágenes que se quieran mostrar como tipo png. draggable: false. draggable: false.html hay una carpeta que se llama images.maps. title:"RECTORIA".-106.png". var imgIngenieria = ". map: map.

html". la página sustituirá los iconos default por las imágenes personalizadas 4.html la cual va a estar en el mismo nivel que la pagina de facultades.event.location. google. }).addListener(mIngenieria.href = ". //Declaracion de eventos de click google.'click'.html.addListener(mDerecho./rectoria.'click'. function(){ window.Facultad de Ingeniería UACH Proyectos Profesionales 1 Modificar el código y pegar las imágenes descritas.maps.href = ".addListener(mRectoria.4 Agregar eventos de clic a las imágenes Debajo de la sección donde se declararon los marcadores se agregan los eventos a los marcadores. function(){ window.href = ". 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 página llamada ingeniería.html". 20 .event. }).maps.html".event.location.location. de igual forma para los otros dos marcadores. function(){ window.'click'./derecho. google. esto estando aun en la función principal de initialize(). })./ingenieria.maps.

maps.w3.w3. myOptions). var mIngenieria = new google. var imgIngenieria = ".maps.maps. } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%.LatLng(28.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="content-type" content="text/html.139174).maps. height:100%"> </div> </body> </html> 21 .maps.703763.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> function initialize() { var llCentro= new google. map: map.getElementById("map_canvas").139174). icon: imgIngenieria }).dtd"> <html xmlns="http://www. title:"FACULTAD DE INGENIERIA".Facultad de Ingeniería UACH Proyectos Profesionales 1 4.googleapis. /*Declaración del mapa principal*/ var map = new google.-106.HYBRID }. mapTypeId: google.MapTypeId.-106. center: llCentro. charset=utf-8" /> <title>Facultades</title> <script type="text/javascript" src="http://maps. /*Declaracion de marcadores*/ var llIngenieria = new google.png".0 Transitional//EN" "http://www. var myOptions = { zoom: 17.Marker({ position: llIngenieria.org/TR/xhtml1/DTD/xhtml1-transitional. draggable: false.Map(document.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./images/icons/ingenieria.LatLng(28.5 Creación de las páginas para mostrar el detalle de las ubicaciones ingeniería.703763.

la cual se sustituye por lo que corresponde a derecho o a rectoría. lo único que cambia es la parte que está en negrita. cuando en la página de facultades.html. 22 .html. va mandar llamar a la página de ingeniería.html se le de click al marcador de ingeniería. es decir a la imagen de ingeniería. Las páginas de derecho. solo que va a ser única para ingeniería y va a tener el centro en ingeniería y un nivel de zoom más grande para ver más a detalle la facultad.html y rectoría. Teniendo estos tres archivos listos.html son iguales.Facultad de Ingeniería UACH Proyectos Profesionales 1 Esta parte es un parte de la página de facultades. la cual va a mostrar la facultad desde más cerca.

">'+ '<img style="display:block./images/small_facultades/ingenieria. var infowindow = new google. 23 . margin:auto.addListener(mIngenieria. 'click'. Chih. La variable contentString es la que va a contener una serie de sentencias html.6 Creación de la ventana de información del marcador Ahora estando en la página de ingeniería.event.open(map.'+ '</p>'+ '</div>'+ '</div>'.InfoWindow({ content: contentString }). dentro de esta carpeta una llamada small_facultades y dentro de esta una imagen llamada ingeniería. (614) 442-9500 <br />'+ 'Chihuahua. }).html en lugar de darle un evento de click al icono para mostrar alguna página. Para esto se debe agregar el siguiente código debajo de la declaración de los marcadores var contentString = '<div id="content" style="padding: 10px.mIngenieria). google.maps. La imagen según se está llamando se encuentra en la carpeta images la cual este en el mismo nivel que el archivo ingeniería.jpg." src=". principalmente un div el cual contendrá tanto la imagen que se le va asignar y los datos como teléfono y dirección.Facultad de Ingeniería UACH Proyectos Profesionales 1 4.jpg" width="300" height="200"/>'+ '<div id="siteNotice">'+ '</div>'+ '<h2 id="firstHeading" class="firstHeading">FACULTAD DE INGENIERIA</h2>'+ '<div id="bodyContent">'+ '<p style="font-size: 16pt.">Circuito Universitario Campus II<br />'+ 'Tel.html.maps. se le va a dar la funcionalidad de mostrar una ventana de información con los detalles. function() { infowindow.

center: llCentro. así como un panel lateral en el cual se van a mostrar los datos relevantes a la ruta trazada.maps. var directionsService = new google. var llCentro= new google.maps.maps.LatLng(28. 4. 1 var directionsDisplay.7 Trazar la ruta entre dos puntos Estando de nuevo en el archivo facultades.DirectionsService(). Se van a agregar botones para calcular la distancia recta y otro para la distancia.656060.MapTypeId. function initialize() { 2 directionsDisplay = new google.Facultad de Ingeniería UACH Proyectos Profesionales 1 Al hacer click ahora en el icono de ingeniería va a desplegar una ventana de información. var map.ROADMAP }.-106.html. 24 . mapTypeId: google. se va a agregar la funcionalidad de escoger un origen y un destino para posteriormente trazar una ruta.088727).maps. var myOptions = { zoom: 12.DirectionsRenderer().

title:"RECTORIA".-106. map: map.maps.072290).139174). draggable: false.html". title:"FACULTAD DE INGENIERIA".'click'.maps.LatLng(28.setMap(map).href = ".-106. }).maps.Marker({ position: llRectoria./images/icons/rectoria. 25 . icon: imgIngenieria }). draggable: false.Marker({ position: llIngenieria. var imgIngenieria = ". myOptions).'click'./images/icons/ingenieria. function(){ window. var imgRectoria = ".location.event./ingenieria.html". google.maps.png"./derecho. icon: imgRectoria }). function(){ window.656060.href = ".maps.Facultad de Ingeniería UACH Proyectos Profesionales 1 map = new google.html".LatLng(28.maps.Map(document.maps.addListener(mDerecho.event.href = ". title:"FACULTAD DE DERECHO"./images/icons/derecho.maps. google. }). //Declaracion de marcadores var llIngenieria = new google. map: map. 3 directionsDisplay.LatLng(28.638171. var mRectoria = new google.-106.'click'.location. draggable: false.addListener(mIngenieria.addListener(mRectoria. var mDerecho = new google.703763.event.location.Marker({ position: llDerecho. var llRectoria= new google.088727).getElementById("map_canvas"). var mIngenieria = new google. map: map.maps. function(){ window./rectoria.maps.png".png". var imgDerecho = ". //Declaracion de eventos de click google. icon: imgDerecho }). var llDerecho = new google.

703763.substring(10).substring(0.setPanel(document. var end = document.computeDistanceBetween(nyc.OK) { if (modo == "ruta") directionsDisplay. destination:end.value. function(result. var lon1 = inicio.value. 5 directionsDisplay. var london = new google.maps.getElementById("start"). var distancia2 = google.LatLng(lat2.getElementById("end").638171.substring(0.LatLng(lat1. directionsService.routes[0]. alert(distancia2/1000 + " Km.geometry.getElementById("start"). } </script> </head> <body onload="initialize()"> 7 <div> <strong>Origen: </strong> <select id="start"> <option value="28.maps. travelMode: google.-106. } 6 function mensaje(){ var inicio = document. alert(distTotal).route(request. var fin = document.value.maps.-106.088727">Derecho</option> <option value="28.getElementById("directionsPanel")).Facultad de Ingeniería UACH Proyectos Profesionales 1 }).substring(10).maps. } } }).DRIVING }.maps.9). var lon2 = fin. if (modo == "total"){ var distTotal = result.lon2).legs[0].spherical.072290">Rectoria</option> 26 .setDirections(result).139174">Ingenieria</option> <option value="28.TravelMode.").lon1). } 4 function calcRoute(modo) { var start = document.-106. var request = { origin:start.9). var nyc = new google. var lat1 = inicio.656060. london). status) { if (status == google.value.DirectionsStatus. var lat2 = fin.distance.text.getElementById("end").

4.656060.703763.Esta es la función que va a trazar la ruta mediante los parámetros pasados en origen y destino.Se le dice que el mapa principal va a tener la función de directionsDisplay." title="Distancia Total" >Distancia Total</button> </div> <div id="map_canvas" style="float:left. 27 ..html para que pueda mostrar las rutas.638171..Se declaran tres variables globales para poder hacer uso de ellas en el código de javaScript 2.072290">Rectoria</option> </select> <button name="btnDistanciaRuta" onclick="calcRoute('ruta').height 100%"> </body> </html> En el código de arriba las partes que están con negrita son las que se le agregan al archivo facultades.088727">Derecho</option> <option value="28.Facultad de Ingeniería UACH Proyectos Profesionales 1 </select> <strong>Destino: </strong> <select id="end"> <option value="28. 3.139174">Ingenieria</option> <option value="28. va a calcular la distancia recorrida si se fuera manejando.-106. height:100%"></div> 8 <div id="directionsPanel" style="float:right." title="Distancia Recta" >Distancia Recta</button> <button name="btnDistanciaTotal" onclick="calcRoute('total')...width:70%. ya que se está haciendo uso de la modalidad DRIVING. describiendo mediante números los puntos clave de la ruta. mediante el uso del servicio de direcciones de Google.A la variable directionsDisplay se le agrega la funcionalidad de describir los puntos usados en una ruta dada.width:30%.-106. También realiza el trazo de los puntos en el panel derecho.-106." title="Ruta" >Dibujar Ruta</button> <button name="btnDistanciaRecta" onclick="mensaje(). 1.

. como lo son los selectores de origen y destino. En esta parte es donde se hace el llamado a las distintas funciones desde los botones. 6. 7.. el botón de trazar ruta.Aquí es donde explícitamente dentro de la función calcRoute() se pasan los datos al panel. medir distancia recorrida y medir distancia recta. 8.Este es el div superior el cual contiene los botones necesarios para realizar los cálculos.Aquí se declara el div derecho el cual va a ser el panel donde se muestren los puntos clave con descripción de la ruta obtenida.Facultad de Ingeniería UACH Proyectos Profesionales 1 5.. mostrándola en Kilómetros.. 28 .Esta función es la que se encarga de medir la distancia recta entre los dos puntos dados.

8 Uso de zoom personalizado Para habilitar el uso de la función de trazar un cuadro selector mediante la tecla shift se necesitan dos cosas: 1. var mIngenieria = new google. <script src="js/keydragzoom. icon: imgIngenieria }).Después de cada declaración de marcadores se agrega markers. generando automáticamente números con el total de los iconos o ubicaciones que agrupo.js que debemos tener en nuestra carpeta js donde tenemos guardados los archivos de javascript.enableKeyDragZoom().Facultad de Ingeniería UACH Proyectos Profesionales 1 4.push(mIngenieria). title:"FACULTAD DE INGENIERIA".push(nombredelmarcadordeclarado). por ejemplo para el de ingeniería seria: var llIngenieria = new google.js" type="text/javascript"></script> 2. map: map.139174).703763. dicha carpeta hay que crearla) donde tenemos guardados los archivos de javascript.Dentro de la funcion initialize se agrega la siguiente línea de código para habilitar en el mapa la función del zoom map. markers.. dicha referencia se agrega en el header de nuestra página.png"...js que debemos tener en nuestra carpeta js (esta carpeta se encuentra a la altura del archivo facultades. dicha referencia se agrega en el header de nuestra página. var imgIngenieria = "images/icons/ingenieria..html.LatLng(28.Hacer referencia al archivo keydragzoom. 3.maps.Hacer referencia al archivo keydragzoom. Para esto se necesitan cuatro cosas: 1. 29 .maps.Marker({ position: llIngenieria. 4. draggable: false. <script src="js/ markerclusterer.js" type="text/javascript"></script> 2.Dentro de la function initialize se declara la variable markers de tipo arreglo var markers = [].-106.9 Uso de MarkerClusterer El uso de esta función es para hacer que los iconos se agrupen si el zoom está muy elevado.

se agrega la siguiente línea de código para crear el MarkerCluster con los marcadores que tenemos en la página. markers).Facultad de Ingeniería UACH Proyectos Profesionales 1 4. var markerCluster = new MarkerClusterer(map. 30 ..Después de haber agregado todos los marcadores a la variable markers mediante el método push.

Facultad de Ingeniería UACH Proyectos Profesionales 1 5 CONCLUSIÓN Se han demostrado los alcances del API de Google Maps para la personalización de una página que esté diseñada para un objetivo en específico. ya que la parte difícil ya está programada por Google y solo es cuestión de hacer uso de nuestra imaginación para saber cómo reunirlas y adaptarlas a las necesidades. 31 . Haciendo uso de algunas de las funciones de esta API. demostrando que de una manera muy sencilla y con pocas líneas de código se pueden lograr cosas muy interesantes.

Sign up to vote on this title
UsefulNot useful