2012

Universidad Catlica Nuestra Seora de la Asuncin Campus Itapu

API Google Maps Multimedia

Integrantes: Angl Rene Penzzi Claudio Fabin Braatz Israel Gerome Van Nevel Denis Fabin Maernitz

Tabla de contenidos
1. 2. 3. Qu es una API? ............................................................................................................................. 3 Un poco de historia........................................................................................................................... 4 Introduccin...................................................................................................................................... 4 3.1. 3.2. 3.3. 3.4. 3.5. 3.6. 3.7. 3.8. 4. El "Hello, World" de Google Maps v. 3 ................................................................................. 5 Cmo declarar tu aplicacin como HTML5 .......................................................................... 5 Carga del API de Google Maps ............................................................................................... 6 Elementos DOM de mapa ........................................................................................................ 6 Opciones de mapa..................................................................................................................... 7 google.maps.Map: el objeto elemental .................................................................................... 7 Carga del mapa......................................................................................................................... 8 Latitudes y longitudes .............................................................................................................. 8

Bibliotecas en la versin 3 del API de Google Maps ..................................................................... 8 4.1. Biblioteca de elementos geomtricos de la versin 3 del API de JavaScript de Google Maps 9 4.2. 4.3. 4.4. Conceptos de geometra esfrica ............................................................................................. 9 Funciones de distancia y rea ................................................................................................ 10 Funciones de desplazamiento ................................................................................................ 12

5. 6.

Mtodos de codificacin ................................................................................................................. 14 Tipos de mapa ................................................................................................................................. 15 6.1. Tipos de mapas bsicos .......................................................................................................... 15

7. 8. 9. 10. 11.

Modificacin del registro del tipo de mapa .................................................................................. 16 Mapas con estilos ............................................................................................................................ 17 Funciones de mapas ....................................................................................................................... 17 Tipos de mapas personalizados ................................................................................................. 18 Coordenadas de mapa................................................................................................................ 18 Coordenadas mundiales ......................................................................................................... 18 Coordenadas de pxeles.......................................................................................................... 19 Coordenadas de mosaico ....................................................................................................... 20 La interfaz MapType ................................................................................................................. 20 Tipos de mapa base .................................................................................................................... 21 Tipos de mapa de superposicin ............................................................................................... 22 Tipos de mapa de imagen .......................................................................................................... 23 Proyecciones................................................................................................................................ 24

11.1. 11.2. 11.3. 12. 13. 14. 15. 16.

16.1. 16.2. 16.3. 17. 18. 18.1. 18.2. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37.

Implementacin de una proyeccin .................................................................................. 24 Transformaciones de coordenadas en proyecciones ....................................................... 24 Seleccin de mosaicos de mapas en proyecciones ............................................................ 25

Visin general de los eventos de mapa...................................................................................... 27 Existen dos tipos de eventos: ..................................................................................................... 27 Eventos de la interfaz de usuario .......................................................................................... 27 Cambios de estado de MVC .................................................................................................. 28 Eventos de mapa ......................................................................................................................... 28 Acceso a los argumentos en los eventos de la interfaz de usuario .......................................... 29 Cmo usar cierres en detectores de eventos ............................................................................. 30 Obtencin y configuracin de propiedades en los controladores de eventos ........................ 31 Cmo detectar eventos DOM .................................................................................................... 32 Controles del mapa..................................................................................................................... 33 La interfaz de usuario predeterminada.................................................................................... 34 El conjunto de controles predeterminado ................................................................................ 34 Cmo inhabilitar la interfaz de usuario predeterminada? ................................................... 35 Cmo aadir controles al mapa? ............................................................................................ 35 Opciones de los controles ........................................................................................................... 36 Cmo modificar los controles? ................................................................................................ 37 Cmo colocar los controles? .................................................................................................... 38 Controles personalizados ........................................................................................................... 40 Cmo representar controles personalizados? ........................................................................ 40 Cmo gestionar eventos desde controles personalizados? .................................................... 41 Cmo colocar los controles personalizados? .......................................................................... 41 Un ejemplo de un control personalizado .................................................................................. 42 Cmo aadir estados a los controles? ..................................................................................... 43

1. Qu es una API?
3

Interfaz de programacin de aplicaciones o API (del ingls Application Programming Interface) es el conjunto de funciones y procedimientos (o mtodos, en la programacin orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstraccin. Son usadas generalmente en las bibliotecas (tambin denominadas vulgarmente "libreras"). Una interfaz de programacin representa la capacidad de comunicacin entre componentes de software. Se trata del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde los procesos y representa un mtodo para conseguir abstraccin en la programacin, generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los superiores del software. Uno de los principales propsitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas de la API haciendo uso de su funcionalidad, evitndose el trabajo de programar todo desde el principio. Las APIs asimismo son abstractas: el software que proporciona una cierta API generalmente es llamado la implementacin de esa API.

2. Un poco de historia
Google Maps es el nombre de un servicio de Google. Es un servidor de aplicaciones de mapas en la Web. Ofrece imgenes de mapas desplazables, as como fotos satelitales del mundo e incluso la ruta entre diferentes ubicaciones o imgenes a pie de calle Street View. Desde el 6 de octubre del 2005, Google Maps es parte de Google Local. Es idntico a Google Earth, una aplicacin Windows/Mac/Linux que ofrece vistas del globo terrqueo, sea de da o de noche, pero que no es fcil de integrar a pginas Web. Ofrece, asimismo, la posibilidad de que cualquier propietario de una pgina Web integre muchas de sus caractersticas a su sitio. Google Maps fue anunciado por primera vez en Google Blog el 8 de febrero del 2005. Originalmente soportara slo a los usuarios de Internet Explorer y Mozilla Firefox, pero el soporte para Opera y Safari fue agregado el 25 de febrero del 2005. El software estuvo en su fase beta por 6 meses antes de convertirse en parte de Google Local, el 6 de octubre del 2005. Como en las aplicaciones webs de Google, se usan un gran nmero de archivos de Javascript para crear Google Maps. Como el usuario puede mover el mapa, la visualizacin del mismo se baja desde el servidor. Cuando un usuario busca un negocio, la ubicacin es marcada por un indicador en forma de pin, el cual es una imagen PNG transparente sobre el mapa. Para lograr la conectividad sin sincrona con el servidor, Google aplic el uso de AJAX dentro de esta aplicacin. Es una aplicacin para el desarrollo de mapas.

3. Introduccin
4

El elemento fundamental en cualquier aplicacin del API de Google Maps v. 3 es el propio mapa. En este segmento se explica el uso del objeto google.maps.Map fundamental y los aspectos bsicos de las operaciones de mapa.

3.1. El "Hello, World" de Google Maps v. 3

La manera ms fcil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. La siguiente pgina web muestra un mapa centrado en Sydney, Nueva Gales del Sur, Australia:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> Incluso en este sencillo ejemplo, hay algunas cosas que se deben tener en cuenta: 1. 2. 3. 4. 5. 6. Declaramos la aplicacin como HTML5 mediante la declaracin <!DOCTYPE html>. Incluimos el cdigo JavaScript del API de Google Maps mediante la etiqueta script. Creamos un elemento div denominado "map_canvas" que aloja el mapa. Creamos un objeto JavaScript literal para alojar una serie de propiedades de mapa. Escribimos una funcin JavaScript para crear un objeto de mapa. Inicializamos el objeto de mapa desde el evento onload de la etiqueta body. Estos pasos se explican a continuacin.

3.2. Cmo declarar tu aplicacin como HTML5

Te recomendamos que declares un DOCTYPE verdadero en tu aplicacin web. En los ejemplos que te mostramos aqu, hemos declarado nuestras aplicaciones como HTML5 mediante el sencillo DOCTYPE HTML5, tal y como se muestra a continuacin: <!DOCTYPE html> Los navegadores ms habituales mostrarn contenido declarado con este DOCTYPE en "modo estndar", lo que significa que tu aplicacin deber ser ms compatible con los navegadores. El DOCTYPE tambin est diseado para ajustarse de la mejor manera; as, los navegadores que no lo entiendan lo ignorarn y utilizarn el "modo chapucero" para mostrar el contenido. Se debe tener en cuenta que algunas de las CSS que funcionan en el modo chapucero no son vlidas en el modo estndar. En concreto, todos los tamaos basados en porcentajes deben heredarse de los elementos de bloque principales, y si cualquiera de estos antecesores no puede especificar un tamao, se supondr un tamao de 0 x 0 pxeles. Por esta razn, incluimos la siguiente declaracin <style>: <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> Esta declaracin de CSS indica que el contenedor del mapa <div> (denominado map_canvas) debe ocupar el 100% de la altura del cuerpo de HTML. Ten en cuenta que debemos declarar de forma especfica estos porcentajes tanto para <body> como para <html>.

3.3. Carga del API de Google Maps

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> La URL http://maps.google.com/maps/api/js permite acceder a la ubicacin de un archivo JavaScript que carga todos los smbolos y las definiciones que se necesitan para utilizar el API de Google Maps v. 3. La pgina debe contener una etiqueta script que dirija a esta URL. La etiqueta <meta> de este encabezado especifica que este mapa se debe mostrar en modo de pantalla completa y el usuario no debera ser capaz de modificar su tamao. Ten en cuenta que tambin debemos establecer un parmetro sensor para indicar si esta aplicacin utiliza un sensor para determinar la ubicacin del usuario. En este ejemplo hemos dejado el parmetro como la variable set_to_true_or_false para hacer hincapi en que se debe definir este valor en true o false de forma explcita. Al cargar el API de JavaScript de Google Maps mediante la URL http://maps.google.com/maps/api/js, tienes la opcin de cargar bibliotecas adicionales utilizando el parmetro libraries. Las bibliotecas son mdulos de cdigo que proporcionan funciones adicionales al API de JavaScript, pero que no se cargan a menos que las solicites de forma especifica.

3.4. Elementos DOM de mapa

6

<div id="map_canvas" style="width: 100%; height: 100%"></div> Para que el mapa se muestre en una pgina web, debemos reservar un lugar para l. Normalmente, lo hacemos mediante la creacin de un elemento div con nombre y la obtencin de una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador. En el ejemplo anterior, definimos un objeto <div> denominado "map_canvas" y definimos su tamao mediante atributos de estilo. Ten en cuenta que este tamao se establece en "100%", lo que ampla el mapa hasta que ocupa toda la pantalla. Es posible que sea necesario ajustar estos valores segn el desplazamiento y el tamao de la pantalla del navegador. Ten en cuenta que el mapa siempre adoptar el tamao del elemento en el que est contenido, por lo que siempre debes establecer un tamao para el elemento <div> de forma explcita.

3.5. Opciones de mapa

var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; Antes de inicializar un mapa, debemos crear un objeto Map options que contenga las variables de inicializacin correspondientes. Este objeto no se construye, sino que se crea como un objeto literal. Como queremos centrar el mapa en un punto especfico, tambin debemos crear un valor latlng que aloje esta ubicacin y la transmita a las opciones del mapa. Tambin debemos establecer el nivel de zoom inicial y especificar mapTypeId como valor de google.maps.MapTypeId.ROADMAP. Se admiten los siguientes tipos: ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps. SATELLITE, que muestra imgenes de satlite. HYBRID, que muestra una mezcla de mosaicos fotogrficos y una capa de mosaicos para los elementos del mapa ms destacados (carreteras, nombres de ciudades, etc.). TERRAIN, que muestra mosaicos de relieve fsico para indicar las elevaciones del terreno y las fuentes de agua (montaas, ros, etc.

3.6. google.maps.Map: el objeto elemental

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); La clase de JavaScript que representa a los mapas es Map. Cada objeto de esta clase define un nico mapa en una pgina. (Puedes crear ms de una instancia de esta clase; cada objeto definir un mapa independiente en la pgina). Creamos una nueva instancia de esta clase mediante el operador new de JavaScript. Al crear una nueva instancia de mapa, se especifica un elemento HTML <div> en la pgina como contenedor para el mapa. Los nodos HTML son elementos secundarios del objeto document de JavaScript. Se obtiene una referencia a este elemento mediante el mtodo document.getElementById(). Este cdigo permite definir una variable (denominada map) y asignar dicha variable a un nuevo objeto Map, adems de transmitir opciones definidas en el objeto myOptionsliteral. Estas opciones se utilizarn para inicializar las propiedades del mapa. A continuacin se muestra la definicin de la funcin Map(), conocida como constructor:

Constructor google.maps.Map(opts? )

Descripcin Permite crear un nuevo mapa a partir de los parmetros opcionales transmitidos por el parmetro

3.7. Carga del mapa

<body onload="initialize()"> Mientras se procesa una pgina HTML, se crea el modelo de objetos de documentos (DOM) y las imgenes y secuencias de comandos externas se reciben y se incorporan al objeto document. Para garantizar que nuestro mapa se aada a la pgina cuando se cargue por completo, solo ejecutamos la funcin que crea el objeto Map cuando el elemento <body> de la pgina HTML ha recibido un evento onload. De este modo, evitamos un comportamiento impredecible y obtenemos ms control acerca del modo y del momento en que se dibuja el mapa. El atributo onload de la etiqueta body es un ejemplo de un controlador de eventos. El API de JavaScript de Google Maps tambin proporciona varios eventos que se pueden controlar para determinar cambios de estado.

3.8. Latitudes y longitudes

Necesitamos una manera de hacer referencia a ubicaciones del mapa. El objeto google.maps.LatLng proporciona esta posibilidad dentro del API de Google Maps. Los objetos LatLng se construyen transmitiendo sus parmetros en el orden habitual {latitud, longitud}: var myLatlng = new google.maps.LatLng(myLatitude, myLongitude) Nota: el proceso de convertir una direccin en un punto geogrfico se conoce como codificacin geogrfica. Esta versin del API de Google Maps incluye funciones de codificacin geogrfica. Los objetos LatLng tienen muchas aplicaciones en el API de Google Maps. Por ejemplo, el objeto google.maps.Marker utiliza un elemento LatLng en su constructor y coloca una superposicin de marcador en la ubicacin geogrfica especificada del mapa.

4. Bibliotecas en la versin 3 del API de Google Maps

El cdigo JavaScript del API de Google Maps se carga a travs de una URL de inicializacin con el formato http://maps.google.com/maps/api/js. Al enviar esta solicitud de inicializacin, se cargan todos los smbolos y los objetos JavaScript que se utilizarn en el API de Google Maps. Algunas funciones del API de Google Maps tambin se encuentran disponibles a travs de bibliotecas independientes que no se cargan a menos que se soliciten explcitamente. La distribucin de componentes complementarios en bibliotecas permite que el API principal se cargue (y se analice) rpidamente, de forma que la nica carga de trabajo adicional que debe asumir el desarrollador es la de cargar y analizar las bibliotecas que pueda necesitar. Para especificar las bibliotecas adicionales que quieras cargar, debes incluir un parmetro libraries con el nombre de esas bibliotecas en la solicitud de inicializacin. Si necesitas indicar varias bibliotecas, debes separarlas con comas. Una vez que se hayan cargado las bibliotecas, se podr acceder a ellas a travs del espacio de nombregoogle.maps.libraryName. A continuacin se indican las bibliotecas que se encuentran disponibles actualmente.

geometry: incluye funciones de utilidades para el clculo de valores geomtricos escalares (como la distancia y el rea) en la superficie terrestre. adsense: permite que la aplicacin desarrollada con el API de Google Maps incluya anuncios de texto contextuales para poder obtener ingresos con los anuncios mostrados a los usuarios. panoramio: contiene funciones que permiten aadir capas de fotos de Panoramio a las aplicaciones creadas con el API de Google Maps.

En la siguiente solicitud de inicializacin se muestra cmo solicitar la biblioteca google.maps.geometry del API de JavaScript de Google Maps: <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=true_or_false"></script>

4.1. Biblioteca de elementos geomtricos de la versin 3 del API de JavaScript de Google Maps
La biblioteca de elementos geomtricos de la versin 3 del API de JavaScript de Google Maps ofrece funciones de utilidades para el clculo de datos geomtricos sobre la superficie de la Tierra. La biblioteca incluye dos espacios de nombre: spherical incluye utilidades de geometra esfrica y te permite calcular ngulos, distancias y reas a partir de latitudes y de longitudes. encoding incluye utilidades para codificar y decodificar rutas de polilneas de acuerdo con el Algoritmo de polilneas codificadas. La biblioteca google.maps.geometry no incluye clases; en su lugar, incluye mtodos estticos de los espacios de nombre anteriores.

4.2. Conceptos de geometra esfrica

Las imgenes del API de JavaScript de Google Maps son bidimensionales y "planas". Sin embargo, la Tierra es tridimensional y casi un esferoide ovoide o una esfera, en trminos ms sencillos. En el API de Google Maps, utilizamos una esfera y, para representar la Tierra en una superficie bidimensional plana como, por ejemplo, la pantalla de tu ordenador, el API de Google Maps utiliza una proyeccin. En las proyecciones en 2D, las imgenes pueden resultar a menudo engaosas. Como la proyeccin del mapa requiere necesariamente que se produzca alguna distorsin, a menudo no se puede aplicar geometra euclidiana sencilla. Por ejemplo, la distancia ms corta entre dos puntos en una esfera no es una lnea recta, sino un gran crculo (un tipo de geodsica), y los ngulos que configuran un tringulo en la superficie de una esfera suman ms de 180 grados. Debido a estas diferencias, es necesario utilizar la geometra esfrica para calcular las funciones geomtricas en una esfera (o en su proyeccin) como, por ejemplo, la distancia, el ngulo y el rea. El espacio de nombre del API de Google Maps google.maps.geometry.spherical incluye utilidades para calcular estas construcciones geomtricas esfricas. Este nombre de espacio ofrece mtodos estticos para calcular valores escalares a partir de coordenadas esfricas (latitudes y longitudes).

4.3. Funciones de distancia y rea

La distancia entre dos puntos es la longitud de la trayectoria ms corta entre ambos puntos. La trayectoria ms corta se conoce como geodsica. En una esfera todas las geodsicas son segmentos de un gran crculo. Para calcular la distancia, debes ejecutar computeDistanceBetween(), transmitiendo dos objetos LatLng. Ej
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> Dist = google.maps.geometry.spherical.computeDistanceBetween(p1, p2); Km = (Dist / 1000).toFixed(3);

En su lugar, puedes utilizar computeLength() para calcular la longitud de una trayectoria determinada si tienes diferentes ubicaciones. Ej.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Pars - Mosc - Pequn</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"> </script> <script type="text/javascript"> function InicializarMapa() { // establece las opciones y crea el mapa var opcionesMapa = { center: new google.maps.LatLng(47.0, 59.0), zoom: 2, mapTypeId: google.maps.MapTypeId.TERRAIN }; var mapa = new google.maps.Map(document.getElementById("elemento_mapa"), opcionesMapa); // coordenadas de Pars, Mosc y Pequn posicionParis = new google.maps.LatLng(48.856578, 2.351828); posicionMoscu = new google.maps.LatLng(55.752222, 37.615556); posicionPekin = new google.maps.LatLng(39.905556, 116.391389); // dibuja la ruta Pars - Mosc - Pequn, utilizando segmentos rectos // respecto a la proyeccin (polilnea estndar) var opcionesRutaParisPekin = { path: [ posicionParis, posicionMoscu, posicionPekin ], strokeColor: "#ff0000", strokeWeitght: 10, strokeOpacity: 0.5, geodesic: true, map: mapa }; var rutaParisPekin = new google.maps.Polyline(opcionesRutaParisPekin); // calcula la longitud en metros de la ruta var longitud = google.maps.geometry.spherical.computeLength(rutaParisPekin.getPath()); // muestra el longitud en km, redondeando el valor var opcionesVentana = {

10

content: "Longitud total: " + Math.round(longitud / 1000) + " km", position: posicionPekin } var ventanaInfo = new google.maps.InfoWindow(opcionesVentana); ventanaInfo.open(mapa); } </script> </head> <body onload="InicializarMapa()"> <div id="elemento_mapa" style="width: 500px; height: 300px"></div> </body> </html>

Como

se

puede

observar,

la

longitud

de

la

ruta

la

calculamos

mediante

la

funcin

"google.maps.geometry.spherical.computeLength()", que, atencin!, espera como parmetro un vector de objetos "LatLng" que representa la secuencia (ordenada) de vertices de la polilnea. Es importante tener claro que la funcin no espera un objeto "Polyline" sino solo sus vertices, Afortunadamente, obtener un vector con los vrtices de una polilne es tan fcil como llamar a la funcin "getPath()" de la clase "Polyline": var longitud = google.maps.geometry.spherical.computeLength(rutaParisPekin.getPath()); Cabe destacar que la longitud obtenida corresponde a la suma de las longitudes de las lneas geodsicas que unen los vrtices adyacientes de la polilnea. Es decir, el nmero que obtenemos s la distancia mnima real (sobre la superfcie terrestre) que se debe recorrer para ir des del origen al fin de la ruta pasando por todos los puntos de paso intermedios. Es importante entender que la longitud de una polilnea depende nica y exclusivamente de la posicin de sus vrtices. Esto significa que, aunque representemos la polilnea mediante segmentos rectos respecto a la proyeccin (recordad: especificando la opcin "geodesic: false" o, simplemente, obviando esta opcin) la longitud de la polilnea no cambiar. El resto del cdigo no presenta sorpresas. Tan solo merece ser destacado el uso de la funcin "Math.round()" que redondea un nmero decimal al nmero entero ms prximo. En el ejemplo se utiliza para redondear la distancia calculada.

Para calcular el rea de un rea poligonal, debes ejecutar computeArea(), transmitiendo el conjunto de objetos LatLng que definen un bucle cerrado. Ej. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>rea de la Plaa de Catalunya de Barcelona</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false" > </script> <script type="text/javascript"> function InicializarMapa() { // establece las opciones y crea el mapa var opcionesMapa = {

11

center: new google.maps.LatLng(41.387024, 2.169960), zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; var mapa = new google.maps.Map(document.getElementById("elemento_mapa"), opcionesMapa); var esquinasPlaza = [ new google.maps.LatLng(41.387877, new google.maps.LatLng(41.387418, new google.maps.LatLng(41.385856, new google.maps.LatLng(41.386919, ]; 2.169971), 2.168748), 2.170143), 2.171205)

// delimita el contorno de la plaza var contornoPlaza = new google.maps.Polygon({ paths: esquinasPlaza, strokeColor: "#ff0000", // color del contorno strokeOpacity: 0.5, // opacidad del contorno strokeWeight: 10, // ancho del contorno fillColor: "#ff0000", // color de relleno fillOpacity: 0.2, // opacidad del relleno map: mapa // mapa sobre el que se debe dibujar el polgono }); // calcula el rea en metros cuadrados del polgono var area = google.maps.geometry.spherical.computeArea(contornoPlaza.getPath()); // muestra el resultado var opcionesVentana = { content: "rea total: " + Math.round(area) + " m²", position: mapa.getCenter() } var ventanaInfo = new google.maps.InfoWindow(opcionesVentana); ventanaInfo.open(mapa); } </script> </head> <body onload="InicializarMapa()"> <div id="elemento_mapa" style="width: 500px; height: 300px"></div> </body> </html>

4.4. Funciones de desplazamiento

Cuando te desplazas por una esfera, un ngulo es el ngulo de una direccin a partir de un punto de referencia fijo, normalmente el norte absoluto. En el API de Google Maps, un ngulo se define en grados a partir del norte absoluto, donde los ngulos se miden en el sentido de la agujas del reloj a partir del norte absoluto (0 grados). Puedes calcular el ngulo entre dos ubicaciones con el mtodo computeHeading(), transmitiendo dos objetos from y to LatLng. A partir de un ngulo determinado, una ubicacin de origen y la distancia a recorrer (en metros), puedes calcular las coordenadas de destino con computeOffset().

12

A partir de dos objetos LatLng y un valor entre 0 y 1, tambin puedes calcular un destino entre ambos con el mtodo interpolate(), que calcula la interpolacin lineal esfrica entre las dos ubicaciones, donde el valor indica la distancia fraccional a recorrer desde el origen hasta el destino. El siguiente ejemplo crea dos polilneas cuando haces clic en dos puntos del mapa (una geodsica y una lnea "recta" que conectan las dos ubicaciones) y calcula el ngulo a recorrer entre los dos puntos:

var var var var

poly; geodesic; map; clickcount = 0;

function initialize() { var atlantic = new google.maps.LatLng(34, -40.605); var myOptions = { zoom: 4, center: atlantic, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var polyOptions = { strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 3 } poly = new google.maps.Polyline(polyOptions); poly.setMap(map); var geodesicOptions = { strokeColor: '#CC0099', strokeOpacity: 1.0, strokeWeight: 3, geodesic: true } geodesic = new google.maps.Polyline(geodesicOptions); geodesic.setMap(map); // Add a listener for the click event google.maps.event.addListener(map, 'click', addLocation); } function addLocation(event) { clickcount++; if (clickcount == 1) { addOrigin(event); } if (clickcount == 2) { addDestination(event); } } function addOrigin(event) { clearPaths(); var path = poly.getPath();

13

path.push(event.latLng); var gPath = geodesic.getPath(); gPath.push(event.latLng); } function addDestination(event) { var path = poly.getPath(); path.push(event.latLng); var gPath = geodesic.getPath(); gPath.push(event.latLng); adjustHeading(); clickcount = 0; } function clearPaths() { var path = poly.getPath(); while (path.getLength()) { path.pop(); } var gPath = geodesic.getPath(); while (gPath.getLength()) { gPath.pop(); } } function adjustHeading() { var path = poly.getPath(); var pathSize = path.getLength(); var heading = google.maps.geometry.spherical.computeHeading(path.getAt(0), path.getAt(pathSize - 1)); document.getElementById('heading').value = heading; document.getElementById('origin').value = path.getAt(0).lat() + "," + path.getAt(0).lng(); document.getElementById('destination').value = path.getAt(pathSize 1).lat() + "," + path.getAt(pathSize - 1).lng(); }

5. Mtodos de codificacin
Las trayectorias de la versin 3 del API de JavaScript de Google Maps frecuentemente se especifican como Array de objetos LatLng. Sin embargo, este tipo de conjunto frecuentemente es muy voluminoso para transmitirlo. Por ello, puedes utilizar el algoritmo de codificacin de poli lneas de Google para comprimir una trayectoria determinada, que posteriormente podrs descomprimir descodificndola. La biblioteca geometry incluye un nombre de espacio encoding para que las utilidades codifiquen y decodifiquen poli lneas. El mtodo esttico encodePath() codifica la trayectoria especificada. Puedes transmitir tanto un conjunto de LatLng como MVCArray (que devuelvePolyline.getPath()). Para decodificar una trayectoria codificada, solo debes ejecutar decodePath() transmitiendo el mtodo de la cadena codificada. El siguiente ejemplo muestra un mapa de Oxford, Misisipi (EE.UU.). Al hacer clic en el mapa se aade un punto a una poli lnea. A medida que se crea la poli lnea, su codificacin se muestra debajo.

14

var poly; var map; function initialize() { var oxford = new google.maps.LatLng(34.3664951, -89.5192484); var myOptions = { zoom: 14, center: oxford, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 } poly = new google.maps.Polyline(polyOptions); poly.setMap(map); // Add a listener for the click event google.maps.event.addListener(map, 'click', addLatLng); } /** * Handles click events on a map, and adds a new point to the Polyline. * Updates the encoding text area with the path's encoded values. */ function addLatLng(event) { var path = poly.getPath(); path.push(event.latLng); // Update the text field to display the polyline encodings var encodeString = google.maps.geometry.encoding.encodePath(path); if (encodeString != null) { document.getElementById('encodedPolyline').value = encodeString; } }

6. Tipos de mapa
En este documento se describen los tipos de mapas que puedes mostrar mediante el API de JavaScript de Google Maps. El API utiliza un objeto MapType para contener informacin sobre estos mapas. Un objeto MapType es una interfaz que define la visualizacin y el uso de mosaicos de mapas, as como la traduccin de sistemas de coordenadas de pantalla a coordenadas reales (en el mapa). Cada objeto MapType debe contener algunos mtodos para gestionar la recuperacin y el suministro de mosaicos y propiedades que definan su comportamiento visual. El funcionamiento interno de los tipos de mapas en el API de Google Maps constituye un tema de nivel avanzado. La mayora de los desarrolladores puede utilizar simplemente los tipos de mapas bsicos que se describen a continuacin. Sin embargo, tambin es posible definir mosaicos de mapas propios mediante tipos de mapas personalizados o modificar la presentacin de tipos de mapas existentes a travs de mapas con estilos. Para proporcionar tipos de mapas personalizados, debes saber cmo modificar el registro del tipo de mapa.

6.1. Tipos de mapas bsicos

15

El API de Google Maps permite utilizar muchos tipos de mapas. Adems de los conocidos mosaicos de mapa de carreteras "pintados", el API de Google Maps tambin ofrece otros tipos de mapas. El API de Google Maps ofrece los siguientes tipos de mapas: MapTypeId.ROADMAP, que muestra la vista de mapa de carreteras predeterminada. MapTypeId.SATELLITE, que muestra imgenes de satlite de Google Earth. MapTypeId.HYBRID, que muestra una mezcla de vistas normales y de satlite. MapTypeId.TERRAIN, que muestra mosaicos de mapas fsicos a partir de la informacin de relieve.

Para modificar el tipo de mapa que utiliza el objeto Map, debes configurar la propiedad mapTypeId configurando el objeto Map options en el constructor o ejecutando el mtodo setMapTypeId() del mapa. # # Setting the mapTypeId upon construction # var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); # # Modifying the mapTypeId dynamically # map.setMapTypeId(google.maps.MapTypeId.TERRAIN); Ten en cuenta que no configuras el tipo de mapa directamente, sino que configuras su objeto mapTypeId para hacer referencia a un objeto MapType mediante un identificador. La versin 3 del API de JavaScript de Google Maps utiliza un registro del tipo de mapa, que se explica a continuacin, para gestionar estas referencias .

7. Modificacin del registro del tipo de mapa

El objeto mapTypeId de un mapa es un identificador de cadena que se utiliza para asociar un objeto MapType a un nico valor. Cada objeto Map mantiene un elemento MapTypeRegistry que contiene el conjunto de objetos MapType disponibles para un mapa. Este registro se utiliza para seleccionar los tipos de mapas que se encuentran disponibles en el control MapType, por ejemplo. No se puede interpretar directamente a partir del registro del tipo de mapa. En su lugar, debes modificar el registro aadiendo tipos de mapas personalizados y asociarlos a un identificador de cadena que elijas. No puedes modificar o alterar los tipos de mapas bsicos (aunque puedes eliminarlos del mapa modificando la apariencia del objeto mapTypeControlOptions asociado del mapa). En el siguiente cdigo se configura el mapa para que muestre nicamente dos tipos de mapas en el objeto mapTypeControlOptions del mismo y se modifica el registro para aadir la asociacin con este identificador a la implementacin real de la interfazMapType. # # # # Modify the control to only display two maptypes, the default ROADMAP and the custom 'mymap'. Note that because this is simply an association, we don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps'; var mapOptions = {

16

zoom: 12, center: brooklyn, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; # Create our map. This creation will implicitly create a # map type registry. map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); # Create your custom map type using your own code. # (See below.) var myMapType = new MyMapType(); # Set the registry to associate 'mymap' with the # custom map type we created, and set the map to # show that map type. map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

8. Mapas con estilos

StyledMapType permite personalizar la presentacin de mapas base de Google estndar, cambiando la visualizacin de elementos tales como carreteras, parques y reas urbanizadas que reflejen un estilo diferente al utilizado en el tipo de mapa predeterminado. Estos componentes se denominan recursos; un objeto StyledMapType te permite seleccionar estos recursos y aplicar estilos a su visualizacin (lo que incluye ocultarlos por completo). Estos cambios permiten resaltar en un mapa componentes concretos o contenido complementario incluido en la pgina. El constructor StyledMapType() toma un conjunto de estilos MapTypeStyles, cada uno de los cuales consta de selectores y modificadores de estilos. Los selectores especifican los componentes de un mapa que se deben seleccionar para la aplicacin sobre ellos de un estilo, mientras que los modificadores de estilos permiten definir las modificaciones visuales que se aplicarn a tales elementos.

9. Funciones de mapas
Un mapa incluye un conjunto de funciones, como una carretera o un parque, especificados a travs de un objeto MapTypeStyleFeatureType. Los tipos de funciones forman un rbol de categoras, cuya raz es all. Al especificar la funcin como all, se seleccionarn todos los elementos de mapa. Algunas categoras de tipos de funciones incluyen subcategoras que se especifican separadas por puntos (por ejemplo, landscape.natural o road.local). Si se especifica la funcin principal (road, por ejemplo), entonces los estilos aplicados a esta seleccin se aplican a todas las carreteras, incluidas las subcategoras. Por otra parte, algunos de los recursos de un mapa constan de diferentes elementos. Por ejemplo, una carretera incluye, no solo la lnea grfica (geometra)que la representa sobre el mapa, sino tambin el texto que indica su nombre (etiquetas) en el mapa. Los elementos de las funciones se seleccionan especificando una categora de tipo MapTypeStyleElementType. Se admiten los siguientes tipos de elementos: all (predeterminado) selecciona todos los elementos del recurso. geometry permite seleccionar solamente los elementos geomtricos de la funcin correspondiente. labels selecciona solo las etiquetas de texto asociadas a una funcin concreta.

Si no se especifica ningn tipo de elemento, los estilos se aplican a todos los elementos con independencia del tipo de elemento.

17

La siguiente especificacin selecciona las etiquetas de todas las carreteras locales: { featureType: "road.local", elementType: "labels" }

10.Tipos de mapas personalizados

La versin 3 de Google Maps JavaScript API admite ahora la visualizacin y administracin de tipos de mapas personalizados, lo que te permite implementar tus propias imgenes de mapas o superposiciones de mosaicos. La versin 3 incluye varias implementaciones de tipos de mapas posibles: Conjuntos de mosaicos estndar, que constan de imgenes que, en su conjunto, constituyen mapas cartogrficos completos. Estos conjuntos de mosaicos tambin se conocen como tipos de mapa base. Estos tipos de mapa actan y se comportan como los tipos de mapa predeterminados: ROADMAP, SATELLITE, HYBRID y TERRAIN. Puedes agregar tus propios tipos de mapa personalizado a un conjunto mapTypesde un mapa para permitir que la interfaz de usuario de Google Maps API considere el tipo de mapa personalizado como un tipo de mapa estndar (incluyndolo en el control MapType, por ejemplo). Superposiciones de mosaicos de imgenes que se muestran sobre tipos de mapa base existentes. Por regla general, estos tipos de mapa se utilizan para ampliar un tipo de mapa existente con el fin de mostrar informacin adicional y, a menudo, se limitan a ubicaciones especficas o niveles de zoom concretos. Ten en cuenta que estos mosaicos pueden ser transparentes, lo que permite agregar funciones a los mapas existentes. Tipos de mapa que no son imgenes, que permiten manipular la visualizacin de la informacin del mapa en el nivel ms bsico. Cada una de estas opciones se basa en la creacin de una clase que implementa la interfaz MapType. Adems, la clase ImageMapType proporciona algunos comportamientos integrados para simplificar la creacin de MapType de imgenes. Antes de explicar las clases encargadas de la implementacin de MapType, conviene comprender la forma en que Google Maps determina las coordenadas y decide las partes del mapa que se mostrarn. Debern implementarse una lgica similar para cualquier MapType de superposicin o base.

11.Coordenadas de mapa
Google Maps API utiliza diversos sistemas de coordenadas: Valores de latitud y longitud que hacen referencia a un punto nico en el mundo. (Google utiliza el estndar WGS84 o Sistema Geodsico Mundial). Coordenadas mundiales que hacen referencia a un punto nico en el mapa. Coordenadas de mosaico que hacen referencia a un mosaico especfico del mapa en el nivel de zoom aplicado.

11.1.

Coordenadas mundiales

Siempre que Maps API necesite convertir una ubicacin del mundo en una ubicacin del mapa (la pantalla), primero deber convertir los valores de latitud y longitud en una coordenada "mundial". Esta conversin se realiza mediante una proyeccin cartogrfica. Google Maps utiliza la proyeccin de Mercator con este propsito. Tambin puedes definir tu propia proyeccin mediante la implementacin de la interfaz google.maps.Projection. (Ten en cuenta que las interfaces de la versin 3 no son clases que puedas "subclasificar", sino que son especificaciones simples para las clases que t mismo defines). Para una mayor comodidad en el clculo de las coordenadas en pxeles, asumimos que un mapa en el nivel de zoom 0 es un nico mosaico del tamao de mosaico base. A continuacin, definimos las coordenadas mundiales de acuerdo

18

con el sistema de coordenadas en pxeles en el nivel de zoom 0, utilizando la proyeccin para convertir latitudes y longitudes en posiciones de pxel en este mosaico base. Esta coordenada mundial es un valor de punto flotante medido desde el origen de la proyeccin del mapa hasta la ubicacin especfica. Ten en cuenta que como este valor es un valor de punto flotante, puede ser mucho ms preciso que la resolucin actual de la imagen de mapa que se muestre. En otras palabras, una coordenada mundial es independiente del nivel de zoom actual. Las coordenadas mundiales de Google Maps se miden a partir del origen de la proyeccin de Mercator (la esquina noroccidental del mapa a 180 grados de longitud y 85 grados de latitud aproximadamente) y se incrementa a lo largo del eje x en direccin este (derecha) y a lo largo del eje y en direccin sur (abajo). Dado que el mosaico base de la proyeccin de Mercator en Google Maps es de 256 x 256 pxeles, el espacio de coordenadas mundiales que se puede utilizar equivale a {0256}, {0-256}.

Ten en cuenta que una proyeccin de Mercator tiene un ancho longitudinalmente finito, pero un alto latitudinalmente infinito. "Cortamos" la imagen del mapa base que utiliza una proyeccin de Mercator en +/- 85 grados aproximadamente para que el mapa resultante tenga forma rectangular, con lo que la seleccin de mosaicos presenta una lgica mucho ms sencilla. Ten en cuenta que es posible que una proyeccin produzca coordenadas mundiales que se siten fuera del espacio de coordenadas utilizables del mapa base si te acercas demasiado a los polos, por ejemplo.

11.2.

Coordenadas de pxeles

Las coordenadas mundiales representan ubicaciones absolutas en una proyeccin dada, pero necesitamos convertirlas en coordenadas de pxeles para determinar la desviacin en "pxeles" en un nivel de zoom concreto. Estas coordenadas de pxeles se calculan mediante la frmula siguiente: pixelCoordinate = worldCoordinate * 2zoomLevel De la ecuacin anterior, fjate en que cada nivel de zoom creciente equivale al doble en las direcciones x y y. Por tanto, cada nivel de zoom superior presenta una resolucin que cuadriplica la del nivel precedente. Por ejemplo, en el nivel de zoom 1, el mapa consta de cuatro mosaicos de 256 x 256 pxeles, lo que equivale a un espacio en pxeles de 512 x 512. En el nivel de zoom 19, se puede hacer referencia a cada pxel x e y del mapa utilizando un valor entre 0 y 256 * 219. Dado que basamos las coordenadas mundiales en el tamao de mosaico del mapa, la parte entera de las coordenadas de pxeles permite identificar el pxel exacto en dicha ubicacin en el nivel de zoom actual. Ten en cuenta que en el nivel de zoom 0, las coordenadas de pxeles equivalen a las coordenadas mundiales. Ahora ya disponemos de un mtodo para representar con precisin todas las ubicaciones del mapa en todos los niveles de zoom. Google Maps API construye una ventana grfica a partir del centro del nivel de zoom del mapa (como LatLng) y el tamao del elemento DOM que lo contiene y convierte este cuadro delimitador en coordenadas de pxeles. El API determina entonces de forma lgica todos los mosaicos del mapa incluidos dentro de los lmites de pxeles

19

especificados. Se hace referencia a cada uno de estos mosaicos de mapa mediante coordenadas de mosaico, que simplifican enormemente la visualizacin de las imgenes del mapa.

11.3.

Coordenadas de mosaico

Lo ms probable es que Google Maps API no pueda cargar todas las imgenes del mapa en los niveles de zoom superiores, que resultan de mayor utilidad; en su lugar, Google Maps API descompone las imgenes de cada nivel de zoom en un conjunto de mosaicos de mapa organizados de forma lgica en el orden que comprende la aplicacin. Cuando se desplaza un mapa a una ubicacin nueva o a un nivel de zoom nuevo, Google Maps API determina los mosaicos necesarios mediante las coordenadas de pxeles y convierte estos valores en un conjunto de mosaicos para su recuperacin. Estas coordenadas de mosaico se asignan mediante un esquema que hace que resulte fcil determinar desde un punto de vista lgico el mosaico que contiene las imgenes correspondientes a un punto especfico. En Google Maps, los mosaicos se numeran desde el mismo origen que los pxeles. Para la implementacin en Google de la proyeccin de Mercator, el mosaico de origen se encuentra siempre en la esquina ms noroccidental del mapa; los valores del eje x aumentan de oeste a este y los del eje y aumentan de norte a sur. Los mosaicos se indexan utilizando las coordenadas x,y desde ese origen. Por ejemplo, en el nivel de zoom 2, cuando la Tierra se divide en 16 teselas, se puede hacer referencia a cada una de ellas mediante un par x,y exclusivo:

Ten en cuenta que al dividir las coordenadas de pxeles por el tamao de mosaico y tomar la parte entera del resultado, se obtiene como consecuencia la coordenada de mosaico en el nivel de zoom actual.

12.La interfaz MapType

Los tipos de mapas personalizados deben implementar la interfaz MapType. Esta interfaz especifica determinadas propiedades y mtodos que permiten que el API inicie solicitudes en los tipos de mapa cuando determine que necesita mostrar mosaicos de mapa en la ventana grfica y en el nivel de zoom actuales. Estas solicitudes permiten determinar el mosaico que se cargar. (Nota: puedes crear tu propia clase para implementar esta interfaz; o bien, si dispones de imgenes compatibles, utilizar la clase ImageMapType que ya implementa esta interfaz). Las clases que implementan la interfaz MapType requieren que definas y completes las propiedades siguientes: tileSize (obligatoria) especifica el tamao del mosaico (de tipo google.maps.Size). Es necesario que tengan forma rectangular, aunque no necesariamente han de ser cuadrados. maxZoom (obligatoria) especifica el nivel de zoom mximo con el que se mostrarn los mosaicos de este tipo de mapa.

20

 minZoom (obligatoria) especifica el nivel de zoom mnimo con el que se mostrarn los mosaicos de este tipo de mapa. De forma predeterminada, este valor es 0, lo que indica que no existe ningn nivel de zoom mnimo. name (opcional) especifica el nombre de este tipo de mapa. Esta propiedad solo es necesaria si deseas que este tipo de mapa se pueda seleccionar en el control MapType. alt (opcional) especifica el texto alternativo para este tipo de mapa, mostrado en forma de texto que se muestra al colocar el cursor del ratn sobre determinado elemento. Esta propiedad solo es necesaria si deseas que este tipo de mapa se pueda seleccionar en el control MapType. (Consulta la seccin Cmo aadir controles MapType incluida ms adelante). Adems, las clases que implementan la interfaz MapType necesitan que implementes los siguientes mtodos: getTile() (obligatorio) se ejecuta siempre que el API determina que es necesario mostrar en el mapa mosaicos nuevos en la ventana grfica correspondiente. El mtodo getTile() debe poseer la siguiente firma: getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node El API determina si es necesario ejecutar getTile() en base a las propiedades tileSize, minZoom y maxZoom de MapType y a la ventana grfica y el nivel de zoom actuales del mapa. El controlador de este mtodo debe devolver un elemento HTML a partir de una coordenada transmitida, el nivel de zoom y el elemento DOM en el que aadir la imagen de mosaico. releaseTile() (opcional) se ejecuta siempre que el API determina que es necesario eliminar un mosaico del mapa porque queda fuera del rea de visin. Este mtodo debe poseer la siguiente firma: releaseTile(tile:Node) Normalmente, la eliminacin de cualquier elemento asociado a los mosaicos del mapa se realiza despus de aadirlos a este. Por ejemplo, si has asociado detectores de eventos a las superposiciones de mosaicos de mapa, debers eliminarlos aqu. El mtodo getTile() funciona como el principal controlador para determinar los mosaicos que se cargarn en una ventana grfica concreta.

13.Tipos de mapa base

Los tipos de mapa que se crean de esta manera, pueden ser independientes, o bien combinarse con otros tipos de mapa en forma de superposiciones. Los tipos de mapas independientes se denominan tipos de mapa base. Quiz desees que el API trate estos tipos de mapa (MapType) personalizados como cualquier otro tipo de mapa base ya existente (ROADMAP, TERRAIN, etc.). Para ello, aade el MapType personalizado a la propiedad mapTypes de Map. Esta propiedad es de tipo MapTypeRegistry. El cdigo siguiente crea un tipo de mapa (MapType) base para mostrar las coordenadas de mosaico de un mapa y traza un contorno de los mosaicos: function CoordMapType() { } CoordMapType.prototype.tileSize = new google.maps.Size(256,256); CoordMapType.prototype.maxZoom = 19; CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); div.innerHTML = coord; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.borderStyle = 'solid';

21

div.style.borderWidth = '1px'; div.style.borderColor = '#AAAAAA'; return div; }; CoordMapType.prototype.name = "Tile #s"; CoordMapType.prototype.alt = "Tile Coordinate Map Type"; var map; var chicago = new google.maps.LatLng(41.850033,-87.6500523); var coordinateMapType = new CoordMapType(); function initialize() { var mapOptions = { zoom: 10, center: chicago, mapTypeControlOptions: { mapTypeIds: ['coordinate', google.maps.MapTypeId.ROADMAP], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // Now attach the coordinate map type to the map's registry map.mapTypes.set('coordinate',coordinateMapType); // We can now set the map to use the 'coordinate' map type map.setMapTypeId('coordinate'); }

14.Tipos de mapa de superposicin

En ocasiones, se designan algunos tipos de mapa para que se muestren sobre otros tipos de mapa ya existentes. Es posible que estos tipos de mapa incluyan capas transparentes que muestren puntos de inters o datos adicionales al usuario. (La capa de trfico de Google es un ejemplo de este tipo de mapa). En tales casos, lo normal es que no quieras que el tipo de mapa sea considerado como una entidad independiente. Por el contrario, puedes aadir directamente el tipo de mapa a un MapType ya existente mediante la propiedad overlayMapTypes de Map. Esta propiedad contiene un conjunto MVCArray de tipos de mapa (MapType). Todos los tipos de mapa (base y superposicin) se representan en la capa mapPane. Los tipos de mapa de superposicin se muestran sobre cualquier mapa base al que se encuentren asociados, en el mismo orden en el que aparecen en el conjunto Map.overlayMapTypes. El ejemplo siguiente es idntico al anterior, con la excepcin de que hemos creado una superposicin de mosaicos MapType sobre el tipo de mapa ROADMAP: function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); div.innerHTML = coord; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.borderStyle = 'solid'; div.style.borderWidth = '1px'; div.style.borderColor = '#AAAAAA';

22

return div; }; var map; var chicago = new google.maps.LatLng(41.850033,-87.6500523); function initialize() { var mapOptions = { zoom: 10, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // Insert this overlay map type as the first overlay map type at // position 0. Note that all overlay map types appear on top of // their parent base map. map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); }

15.Tipos de mapa de imagen

La implementacin de un tipo de mapa (MapType) para que sirva de tipo de mapa base puede ser una tarea laboriosa que requiera una gran cantidad de tiempo. El API proporciona una clase especial que implementa la interfaz MapType para los tipos de mapa ms utilizados: tipos de mapa que constan de mosaicos compuestos de archivos de una sola imagen. Esta clase, la clase ImageMapType, se construye a travs de una especificacin de objeto ImageMapTypeOptions que define las siguientes propiedades obligatorias: tileSize (obligatoria) especifica el tamao del mosaico (de tipo google.maps.Size). Es necesario que tengan forma rectangular, aunque no necesariamente han de ser cuadrados. getTileUrl (obligatoria) especifica la funcin, normalmente proporcionada como un literal de funcin insertado, para procesar la seleccin del mosaico de imagen adecuado en el nivel de zoom y las coordenadas mundiales que se han proporcionado.

El cdigo siguiente implementa un tipo ImageMapType bsico mediante los mosaicos de trfico de Google. Te en cuenta que el tipo de mapa se inserta en el conjunto overlayMapTypes del mapa:
var trafficOptions = { getTileUrl: function(coord, zoom) { return "http://mt3.google.com/mapstt?" + "zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api"; }, tileSize: new google.maps.Size(256, 256), isPng: true }; var trafficMapType = new google.maps.ImageMapType(trafficOptions); var map; function initialize() { map = new google.maps.Map(document.getElementById("map_canvas")); map.setCenter(new google.maps.LatLng(37.76, -122.45)); map.setZoom(12); map.setMapTypeId('satellite');

23

map.overlayMapTypes.insertAt(0, trafficMapType); }

16.Proyecciones
La Tierra es una esfera tridimensional (aproximadamente), mientras que un mapa es una representacin en dos dimensiones. El mapa que visualizas en el API de Google Maps, al igual que cualquier representacin plana de la Tierra, es una proyeccin de esa esfera en una superficie plana. En sus trminos ms bsicos, una proyeccin se puede definir como una asignacin de valores de latitud y longitud a las coordenadas del mapa de la proyeccin. En el API de Google Maps, las proyecciones deben implementar la interfaz Projection. La implementacin de un objeto Projection debe proporcionar no solo una asignacin de un sistema de coordenadas a otro, sino tambin una asignacin bidireccional. Es decir, debes determinar cmo traducir desde las coordenadas de la Tierra (LatLng) hasta el sistema de coordenadas mundiales de la proyeccin (Projection), y viceversa. Google Maps utiliza la proyeccin de Mercator para crear sus mapas a partir de datos geogrficos y convertir eventos del mapa en coordenadas geogrficas. Puedes obtener esta proyeccin ejecutando getProjection() en el mapa (Map) (o cualquier de los tipos de mapas (MapType) base estndar). En la mayora de usos, bastar con esta proyeccin (Projection), aunque tambin podrs definir y utilizar tu propias proyecciones personalizadas.

16.1.

Implementacin de una proyeccin

A la hora de implementar una proyeccin personalizada, debes definir los siguientes elementos: Las frmulas para cambiar coordenadas de latitud y longitud a un plano cartesiano y viceversa. (La interfaz Projection solo admite transformaciones a coordenadas rectilneas). El tamao del mosaico base. Todos los mosaicos deben ser rectangulares. El "tamao del mundo" de un mapa utilizando el conjunto de mosaicos base a un nivel 0 de zoom. Ten en cuenta que en los mapas que se componen de un mosaico a un nivel 0 de zoom, el tamao del mundo coincide con el tamao del mosaico base.

16.2.

Transformaciones de coordenadas en proyecciones

Cada proyeccin proporciona dos mtodos que realizan conversiones entre estos dos sistemas de coordenadas, lo que te permite convertir coordenadas geogrficas en mundiales y viceversa: El mtodo Projection.fromLatLngToPoint() convierte un valor LatLng en una coordenada mundial. Este mtodo se utiliza para posicionar superposiciones en el mapa (y para posicionar el mapa en s). El mtodo Projection.fromPointToLatLng() convierte una coordenada mundial en un valor LatLng. Este mtodo se utiliza para convertir eventos, como los clics que se registran en el mapa, en coordenadas geogrficas.

Google Maps supone que las proyecciones son rectilneas.

Generalmente, puedes utilizar una proyeccin para dos finalidades: crear un mapa del mundo o crear un mapa de un rea local. En el primer caso, debes asegurarte de que todas las longitudes de tu proyeccin tambin sean rectilneas y normales. Algunas proyecciones (especialmente, las proyecciones cnicas) pueden ser "localmente normales" (es decir, apuntan al norte), aunque se desvan del norte absoluto; por ejemplo, cuanto ms alejado se coloque el mapa con respecto a alguna longitud de referencia. Puedes utilizar localmente una proyeccin de este tipo, pero debes tener en cuenta que la proyeccin es necesariamente imprecisa y que los errores de transformacin sern mayores cuanto ms te desves de la longitud de referencia.

24

16.3.

Seleccin de mosaicos de mapas en proyecciones

Las proyecciones adems de ser tiles para determinar posiciones de ubicaciones o superposiciones, ayudan a posicionar los propios mosaicos de mapas. El API de Google Maps representa mapas base mediante una interfaz MapType, que debe declarar una propiedad projection para identificar la proyeccin del mapa y un mtodo getTile() para recuperar los mosaicos del mapa en funcin de los valores de coordenadas del mosaico. Las coordenadas del mosaico se basan en el tamao del mosaico bsico (que debe ser rectangular) y el "tamao del Mundo" de tu mapa, que es el tamao de pxel de tu mapa del mundo a un nivel 0 de zoom. (En el caso de los mapas compuestos por un mosaico a un nivel de 0 zoom, el mosaico tiene el mismo tamao que el Mundo). Defines el tamao del mosaico base en la propiedad tileSize de MapType. Defines el tamao del Mundo implcitamente en los mtodos fromLatLngToPoint() y fromPointToLatLng() de tu proyeccin. Debido a que la seleccin de las imgenes depende de estos valores transmitidos, es til establecer un nombre para las imgenes que se puedan seleccionar automticamente, en funcin de estos valores transmitidos, como por ejemplo map_zoom_tileX_tileY.png. El siguiente ejemplo define un ImageMapType con la proyeccin de Gall-Peters: // Note: this value is exact as the map projects a full 360 degrees of longitude var GALL_PETERS_RANGE_X = 800; // Note: this value is inexact as the map is cut off at ~ +/- 83 degrees. // However, the polar regions produce very little increase in Y range, so // we will use the tile size. var GALL_PETERS_RANGE_Y = 510; function degreesToRadians(deg) { return deg * (Math.PI / 180); } function radiansToDegrees(rad) { return rad / (Math.PI / 180); } function GallPetersProjection() { // Using the base map tile, denote the lat/lon of the equatorial origin. this.worldOrigin_ = new google.maps.Point(GALL_PETERS_RANGE_X * 400 / 800, GALL_PETERS_RANGE_Y / 2); // This projection has equidistant meridians, so each longitude degree is a linear // mapping. this.worldCoordinatePerLonDegree_ = GALL_PETERS_RANGE_X / 360; // This constant merely reflects that latitudes vary from +90 to -90 degrees. this.worldCoordinateLatRange = GALL_PETERS_RANGE_Y / 2; }; GallPetersProjection.prototype.fromLatLngToPoint = function(latLng) { var origin = this.worldOrigin_; var x = origin.x + this.worldCoordinatePerLonDegree_ * latLng.lng(); // Note that latitude is measured from the world coordinate origin // at the top left of the map.

25

var latRadians = degreesToRadians(latLng.lat()); var y = origin.y - this.worldCoordinateLatRange * Math.sin(latRadians); return new google.maps.Point(x, y); }; GallPetersProjection.prototype.fromPointToLatLng = function(point, noWrap) { var y = point.y; var x = point.x; if (y y = } if (y y = } < 0) { 0; >= GALL_PETERS_RANGE_Y) { GALL_PETERS_RANGE_Y;

var origin = this.worldOrigin_; var lng = (x - origin.x) / this.worldCoordinatePerLonDegree_; var latRadians = Math.asin((origin.y - y) / this.worldCoordinateLatRange); var lat = radiansToDegrees(latRadians); return new google.maps.LatLng(lat, lng, noWrap); }; function initialize() { var gallPetersMap; var gallPetersMapType = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var numTiles = 1 << zoom; // Don't wrap tiles vertically. if (coord.y < 0 || coord.y >= numTiles) { return null; } // Wrap tiles horizontally. var x = ((coord.x % numTiles) + numTiles) % numTiles; // For simplicity, we use a tileset consisting of 1 tile at zoom level 0 // and 4 tiles at zoom level 1. var baseURL = 'images/'; baseURL += 'gall-peters_' + zoom + '_' + x + '_' + coord.y + '.png'; return baseURL; }, tileSize: new google.maps.Size(800, 512), isPng: true, minZoom: 0, maxZoom: 1, name: 'Gall-Peters' }); gallPetersMapType.projection = new GallPetersProjection(); var mapOptions = { zoom: 0, center: new google.maps.LatLng(0,0) };

26

gallPetersMap = new google.maps.Map(document.getElementById("gallPetersMap"), mapOptions); gallPetersMap.mapTypes.set('gallPetersMap', gallPetersMapType); gallPetersMap.setMapTypeId('gallPetersMap'); gallPetersMap.overlayMapTypes.insertAt(0, gallPetersMapType); }

17. Visin general de los eventos de mapa

JavaScript en el navegador est orientado a eventos, lo que significa que JavaScript responde a las interacciones generando eventos y espera que un programa detecte los eventos interesantes. El modelo de evento de la versin 3 del API de Google Maps es parecido al utilizarlo en la versin 2 del API, aunque han cambiado muchas cosas de su funcionamiento.

18. Existen dos tipos de eventos:

Los eventos de usuario (como, por ejemplo, los eventos de ratn "click") se propagan desde el DOM hasta el API de Google Maps. Estos eventos son distintos e independientes de los eventos DOM estndar.

Las notificaciones de cambio de estado de MVC (Modelviewcontroller) reflejan los cambios en los objetos del API de Google Maps y se denominan mediante una convencin property_changed.

Cada objeto del API de Google Maps exporta una determinada cantidad de eventos con nombres. Los programas interesados en determinados eventos registran detectores de eventos de JavaScript para estos eventos y ejecutan cdigo al recibirlos mediante el registro de controladores de eventos addListener() en el espacio de nombre google.maps.event. Modelo Vista Controlador (MVC) es un patrn de arquitectura de software que separa los datos de una aplicacin, la interfaz de usuario, y la lgica de negocio en tres componentes distintos. El patrn de llamada y retorno MVC (segn CMU), se ve frecuentemente en aplicaciones web, donde la vista es la pgina HTML y el cdigo que provee de datos dinmicos a la pgina. El modelo es el Sistema de Gestin de Base de Datos y la Lgica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.

18.1.

Eventos de la interfaz de usuario

Algunos objetos del API de Google Maps estn diseados para responder a los eventos de usuario como los de ratn o los de teclado. Por ejemplo, un objeto google.maps.Marker puede detectar los siguientes eventos de usuario:

'click' 'dblclick' 'mouseup' 'mousedown' 27

'mouseover' 'mouseout'

Estos eventos pueden tener el aspecto de eventos DOM estndar pero, realmente, forman parte del API de Google Maps. Dado que los distintos navegadores implementan distintos modelos de eventos DOM, el API de Google Maps ofrece estos mecanismos que permiten detectar eventos DOM y responder a ellos sin necesidad de gestionar las diversas peculiaridades de cada plataforma. Estos eventos suelen incluir argumentos en el evento que destacan algn estado de la interfaz de usuario (como, por ejemplo, la posicin del ratn).

18.2.

Cambios de estado de MVC

Los objetos MVC suelen contener estado. Cuando cambia la propiedad de un objeto, el API activa un evento que la propiedad ha cambiado. Por ejemplo, el API activa un evento zoom_changed en un mapa cuando cambia el nivel de zoom del mismo. Para interceptar estos cambios de estado, registra tambin los controladores de eventos addListener() en el mtodo de espacio de nombre event. Los eventos de usuario y los cambios de estado de MVC pueden parecer similares pero, generalmente, se recomienda tratarlos de forma diferente en el cdigo. Los eventos MVC, por ejemplo, no incluyen argumentos en sus eventos. Se recomienda inspeccionar la propiedad que se ha modificado en un cambio de estado de MVC mediante la ejecucin del mtodo getProperty adecuado de ese objeto.

19. Eventos de mapa

El evento addListener() toma un objeto, un evento que debe detectar y una funcin que debe ejecutar al producirse el evento especificado. El siguiente cdigo combina los eventos de usuario y los eventos de cambio de estado. Adjuntamos un controlador de eventos a un marcador que aplica zoom al mapa al hacer clic en l. Tambin aadimos un controlador de eventos al mapa para los cambios en la propiedad "zoom" y desplazamos el mapa a Darwin, Territorio del Norte, Australia en el momento de recepcin del evento zoom_changed:

var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDarwin, 3000); });

28

var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); google.maps.event.addListener(marker, 'click', function() { map.setZoom(8); }); } function moveToDarwin() { var darwin = new google.maps.LatLng(-12.461334, 130.841904); map.setCenter(darwin); }

20. Acceso a los argumentos en los eventos de la interfaz de usuario

Los eventos de la interfaz de usuario de la versin 3 del API de Google Maps suelen transmitir un argumento de evento, al que se puede acceder mediante el detector de eventos, destacando el estado de la interfaz de usuario al producirse el evento. Por ejemplo, un evento de interfaz de usuario 'click' suele transmitir MouseEvent con una propiedad latLng que denota las coordenadas de pantalla de dicha ubicacin. Se debe tener en cuenta que este comportamiento es exclusivo de los eventos de la interfaz de usuario; los cambios de estado de MVC no transmiten argumentos en sus eventos. Podemos acceder a los argumentos de eventos de un detector de eventos igual que accedes a las propiedades de un objeto. En el siguiente ejemplo se aade un detector de eventos para el mapa y se crea un marcador cuando el usuario hace clic en el mapa en la ubicacin en la que se ha hecho clic.

var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); } function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map });

29

map.setCenter(location); }

21. Cmo usar cierres en detectores de eventos

Al ejecutar un detector de eventos, suele ser recomendable disponer de datos privados y persistentes adjuntos a un objeto. JavaScript no admite datos de instancias privadas, pero s admite cierres, lo que permite que las funciones internas accedan a variables externas. Los cierres resultan tiles en los detectores de eventos para acceder a variables que normalmente no estn adjuntas a los objetos en los que se producen los eventos. En el siguiente ejemplo se utiliza un cierre de funcin en el detector de eventos para asignar un mensaje secreto a un conjunto de marcadores. Al hacer clic en cada marcador se revisa una parte del mensaje secreto, que no est incluido en el propio marcador.

var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Add 5 markers to the map at random locations var southWest = new google.maps.LatLng(-31.203405,125.244141); var northEast = new google.maps.LatLng(-25.363882,131.044922); var bounds = new google.maps.LatLngBounds(southWest,northEast); map.fitBounds(bounds); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 5; i++) { var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new google.maps.Marker({ position: location, map: map }); var j = i + 1; marker.setTitle(j.toString()); attachSecretMessage(marker, i); } } // The five markers show a secret message when clicked // but that message is not within the marker's instance data

30

function attachSecretMessage(marker, number) { var message = ["This","is","the","secret","message"]; var infowindow = new google.maps.InfoWindow( { content: message[number], size: new google.maps.Size(50,50) }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); }

22. Obtencin y configuracin de propiedades en los controladores de eventos

Ninguno de los eventos de cambio de estado de MVC del sistema de eventos del API de Google Maps transmite argumentos cuando se activa el evento. (Los eventos de usuario s transmiten argumentos que se pueden inspeccionar). Si necesitamos inspeccionar una propiedad del cambio de estado de MVC, debemos ejecutar de forma explcita el mtodo getProperty() adecuado a ese objeto. Esta inspeccin recupera siempre el estado actual del objeto MVC, que puede no ser el estado que tena cuando el evento se activ por primera vez. Nota: configurar de forma explcita una propiedad del controlador de eventos que responde al cambio de estado de esa propiedad concreta puede producir un comportamiento impredecible o no deseado. Por ejemplo, al configurar esa propiedad se activar un nuevo evento y si configuramos siempre una propiedad de este controlador de eventos, podemos terminar creando un bucle infinito. En el ejemplo que aparece a continuacin se ha configurado un controlador de eventos para responder a los eventos de zoom con una ventana de informacin que muestre ese nivel. Tambin se ha comprobado si el mapa se acerca o aleja completamente en el nivel de zoom 17.

var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var zoomLevel; var infowindow = new google.maps.InfoWindow( { content: 'Zoom Level Test', size: new google.maps.Size(50,50), position: myLatlng }); infowindow.open(map); google.maps.event.addListener(map, 'zoom_changed', function() { zoomLevel = map.getZoom(); 31

infowindow.setContent("Zoom: " + zoomLevel); if (zoomLevel == 0) { map.setZoom(10); } }); }

23. Cmo detectar eventos DOM

El modelo de eventos del API de JavaScript de Google Maps crea y gestiona sus propios eventos personalizados. Sin embargo, el modelo de objetos de documentos (DOM) tambin crea y enva sus propios eventos de acuerdo con el modelo de evento del navegador que se est utilizando. Si deseamos capturar y responder a estos eventos, el API de Google Maps proporciona el mtodo esttico addDomListener() para detectar y vincular eventos DOM. Este cmodo mtodo tiene una firma como la que se muestra a continuacin:

addDomListener(instance:Object, eventName:string, handler:Function)

donde instance puede ser cualquier elemento DOM que admita el navegador, entre los que se incluyen los siguientes:

miembros jerrquicos de DOM como window o document.body.myform, elementos con nombre como document.getElementById("foo").
Hay que tener en cuenta que addDomListener() solo transmite el evento indicado al navegador, que lo gestiona de

acuerdo con el modelo de evento de DOM del navegador; no obstante, casi todos los navegadores modernos admiten al menos el nivel dos DOM. El evento window.onload, que gestionamos con la etiqueta <body>. Utilizamos este evento para activar el cdigo JavaScript inicial una vez se ha cargado por completo una pgina HTML como se muestra a continuacin:

<script> function initialize() { // Map initialization } </script> <body onload="initialize()"> <div id="map_canvas"></div> </body>
Aunque este evento se asocia al elemento <body>, es en realidad un evento window que indica que la jerarqua DOM debajo del elemento window se ha creado y representado completamente. Aunque es fcil de comprender, un evento onload dentro de una etiqueta <body> mezcla contenido con comportamiento. Generalmente, se considera una buena prctica separar el cdigo de contenido (HTML) del cdigo de comportamiento (JavaScript) y suministrar el cdigo de presentacin (CSS) tambin aparte. Puedes hacerlo sustituyendo el

32

controlador de eventos onload en lnea por un detector DOM dentro del cdigo JavaScript del API de Google Maps como se indica a continuacin:

<script> function initialize() { // Map initialization } google.maps.event.addDomListener(window, 'load', initialize); </script> <body> <div id="map_canvas"></div> </body>

24. Controles del mapa

Los mapas de Google Maps contienen elementos de interfaz de usuario que permiten al usuario interactuar con el mapa. Estos elementos se denominan controles y puedes incluir variaciones de ellos en la aplicacin que hayas creado con el API de Google Maps. Tambin puedes optar por no hacer nada y dejar que el API de Google Maps se ocupe del comportamiento de todos los controles. El API de Google Maps dispone de varios controles integrados que puedes emplear en tus mapas: El control de zoom muestra un control deslizante (en el caso de mapas grandes) o botones "+/-" pequeos (en el caso de mapas pequeos) para controlar el nivel de zoom del mapa. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada en dispositivos no tctiles o en la esquina inferior izquierda del mapa de forma predeterminada en los dispositivos tctiles. El control de desplazamiento muestra botones para desplazarse por el mapa. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada en dispositivos no tctiles. El control de desplazamiento tambin te permite girar imgenes a 45, si estn disponibles. El Cmo controlar escala muestra un elemento de escala del mapa. Este control est inhabilitado de forma predeterminada. El Control MapType permite al usuario alternar entre los diferentes tipos de mapas, como ROADMAP (mapa de carreteras) y SATELLITE (satlite). Este control aparece en la esquina superior derecha del mapa de forma predeterminada. El control de Street View incluye un icono de hombrecito naranja que se puede arrastrar hasta el mapa para habilitar la funcin de Street View. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada.

33

El control de giro incluye un icono circular pequeo que te permite girar mapas que contienen imgenes oblicuas. Este control aparece en la esquina superior izquierda del mapa de forma predeterminada. El control de mapa general muestra un mapa general en miniatura que refleja la ventana grfica del mapa actual dentro de una zona ms amplia. Este control aparece en la esquina inferior derecha del mapa y se muestra contrado de forma predeterminada. Nota: el control de navegacin que exista anteriormente se ha descartado y divido en controles de zoom y desplazamiento independientes. No puedes acceder ni modificar estos controles del mapa directamente, pero puedes modificar los campos MapOptions del mapa que afectan a la visibilidad y a la presentacin de los controles. Puedes ajustar la presentacin de los controles creando una instancia del mapa (con las opciones adecuadas MapOptions) o modificar un mapa de forma dinmica ejecutando setOptions() para cambiar las opciones del mapa. No todos estos controles estn habilitados de forma predeterminada.

25. La interfaz de usuario predeterminada

Si lo deseas, en lugar de especificar y configurar controles individuales, puedes simplemente determinar que tu mapa tenga el mismo aspecto que la interfaz de Google Maps, incluidos los nuevos controles o funciones que se aadan en el futuro. Para disponer de este comportamiento, no tienes que hacer nada. Tu mapa aparecer con los controles predeterminados.

26. El conjunto de controles predeterminado

El API de Google Maps proporciona los controles predeterminados que se indican a continuacin:

Control Zoom

Pantallas grandes Control de zoom de gran tamao para pantallas de ms de 400x350 px

Pantallas pequeas Control de zoom pequeo para pantallas de menos de 400x350 px No est presente en pantallas de menos de 400x350 px

iPhone No est presente. La imagen se acerca y se aleja pellizcando la pantalla con dos dedos. No est presente. El usuario se desplaza por la imagen tocando la pantalla.

Android Cmo controlar estilo "tctil"

Desplazamiento

Presente en pantallas de ms de 400x350 px

No est presente. El usuario se desplaza por la imagen tocando la pantalla.

MapType

Barra horizontal para pantallas de ms de 320 px de ancho

Men desplegable para pantallas de menos de 320 px de ancho

Igual que para pantallas grandes o pequeas

Igual que para pantallas grandes o pequeas

34

Escala

No presente

No presente

No presente

No presente

Adems, el manejo con el teclado est activado de forma predeterminada en todos los dispositivos.

27. Cmo inhabilitar la interfaz de usuario predeterminada?

Si, por el contrario, deseas desactivar la configuracin predeterminada de la interfaz de usuario del API, debers establecer la propiedad disableDefaultUI (en el objeto Map options) del mapa (Map) en true. Esta propiedad inhabilita cualquier comportamiento automtico de la interfaz de usuario procedente del API de Google Maps. El cdigo que aparece a continuacin inhabilita toda la interfaz de usuario predeterminada:

function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

28. Cmo aadir controles al mapa?

Si lo deseas, puedes confeccionar tu interfaz mediante la eliminacin, la adicin y la modificacin del comportamiento y de los controles de la interfaz de usuario y asegurarte de que las futuras actualizaciones no modifiquen este comportamiento. Si solo deseas aadir o modificar comportamientos existentes, debers asegurarte de que el control se haya aadido explcitamente a tu aplicacin. Algunos controles aparecen en el mapa de forma predeterminada, mientras que otros no se mostrarn a menos que lo solicites explcitamente. La adicin o la eliminacin de controles del mapa se especifica mediante los siguientes campos del objeto Map options; campos que debers establecer en true para mostrar los controles y en false para ocultarlos: { panControl: boolean, zoomControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, overviewMapControl: boolean } Con el siguiente ejemplo se configura el mapa para que oculte los controles de navegacin (de zoom y desplazamiento) y muestre el control de escala. Ten en cuenta que no se inhabilita explcitamente la interfaz de usuario predeterminada, de manera que estas modificaciones se aadan al comportamiento de la misma.

function initialize() { var myOptions = {

35

zoom: 4, center: new google.maps.LatLng(-33, 151), panControl: false, zoomControl: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

29. Opciones de los controles

Algunos controles se pueden configurar, lo que te permite modificar su comportamiento o cambiar su apariencia. Por ejemplo, el control de zoom puede mostrarse como un control grande con un control deslizante de zoom completo o como un control de zoom mini para mapas de menor tamao. Estos controles se alteran mediante la modificacin de los campos de opciones de los controles adecuados en el objeto MapOptions al crear el mapa. Por ejemplo, las opciones para modificar el control de zoom se indican en el campo zoomControlOptions. El control de zoom puede mostrarse en una de las siguientes opciones style: google.maps.ZoomControlStyle.SMALL muestra un control de zoom mini que solo dispone de los botones + y -. Este estilo es adecuado para mapas pequeos. En dispositivos tctiles, este control aparece como botones + y - que responden a los eventos de toque. google.maps.ZoomControlStyle.LARGE muestra el control deslizante de zoom estndar. En dispositivos tctiles, este control aparece como botones + y - que responden a los eventos de toque. google.maps.ZoomControlStyle.DEFAULT escoge un control de zoom apropiado en funcin del tamao del mapa y del dispositivo en el que se est utilizando. El Control MapType puede mostrarse en una de las siguientes opciones style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR muestra el conjunto de controles como botones situados en una barra horizontal como la que se muestra en Google Maps. google.maps.MapTypeControlStyle.DROPDOWN_MENU muestra un control de un solo botn que permite seleccionar el tipo de mapa a travs de un men desplegable. google.maps.MapTypeControlStyle.DEFAULT muestra el control "predeterminado", que depende del tamao de la pantalla y puede cambiar en futuras versiones del API. Ten en cuenta que si modificas cualquier opcin de un control, tambin debes habilitar de forma explcita ese control mediante el establecimiento del valor apropiado deMapOptions en true. Por ejemplo, para configurar el control de zoom para que muestre el estilo SMALL, debes incluir el siguiente cdigo en el objeto MapOptions: ... zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } ... En el ejemplo que aparece a continuacin, se establece un control MapType desplegable y se especifica que el control de zoom utilice un diseo de control de zoom mini:

36

function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } Los controles se suelen configurar al crear el mapa. Sin embargo, puedes modificar la presentacin de los controles de forma dinmica ejecutando el mtodo setOptions() del mapa Map y pasndole nuevas opciones de controles.

30. Cmo modificar los controles?

La presentacin de un control se especifica al crear el mapa a travs de los campos del objeto MapOptions del mapa. A continuacin, se explican estos campos: mapTypeControl habilita o inhabilita el control MapType que permite que el usuario alterne entre distintos tipos de mapas (por ejemplo, el modo de mapa y de satlite). De forma predeterminada, este control aparece y est visible en la esquina superior derecha del mapa. El campo mapTypeControlOptions especifica de forma adicional las opciones MapTypeControlOptions que se deben utilizar para este control. panControl habilita e inhabilita el control de desplazamiento. De forma predeterminada, este control aparece y est visible en la esquina superior izquierda del mapa. El campo panControlOptions especifica de forma adicional las opciones PanControlOptions que se deben utilizar para este control. zoomControl habilita e inhabilita el control de zoom. De forma predeterminada, este control aparece y est visible en la esquina superior izquierda del mapa. El campozoomControlOptions especifica de forma adicional las opciones ZoomControlOptions que se deben utilizar para este control. scaleControl habilita o inhabilita el control de escala que proporciona una escala del mapa sencilla. De forma predeterminada, este control no est visible. Cuando se habilita, aparece en la esquina inferior izquierda del mapa. De forma adicional, el campo scaleControlOptions especifica las opciones ScaleControlOptions que se deben utilizar para este control. rotateControl habilita e inhabilita la presencia de un control de giro para controlar la orientacin de imgenes a 45. De forma predeterminada, este control aparece dependiendo de la presencia o la ausencia de imgenes a 45 en el mapa correspondiente con el zoom y la ubicacin actuales. Puedes alterar el comportamiento del control mediante la configuracin de las opciones rotateControlOptions del mapa para especificar la opcin RotateControlOptions que se va a utilizar (aunque no puedes hacer que aparezca el control si no existen imgenes a 45).

37

overviewMapControl habilita e inhabilita el control de mapa general. El control de mapa general se puede mostrar de forma completa (como un mapa general en miniatura) o contrado en un estado minimizado. De forma predeterminada, el control se inhabilita y se contrae. De forma adicional, el campooverviewMapControlOptions especifica las opciones OverviewMapControlOptions que se deben utilizar para este control.

31. Cmo colocar los controles?

Cada una de las opciones de estos controles contiene una propiedad position (del tipo ControlPosition) que indica el lugar en el que se debe colocar el control en el mapa. La posicin de estos controles no es absoluta, es decir, el API distribuir estos controles de forma inteligente colocndolos alrededor de elementos del mapa existentes, o de otros controles, dentro de ciertos lmites (como, por ejemplo, el tamao del mapa). Nota: no se puede garantizar la inexistencia de superposiciones de los controles en el caso de distribuciones complicadas, aunque el API intentar organizarlos de forma inteligente. A continuacin, se indican las posiciones de los controles que se admiten: TOP_CENTER indica que el control se debe colocar en la parte superior central del mapa. TOP_LEFT indica que el control se debe colocar en la parte superior izquierda del mapa y que los correspondientes subelementos del mismo se deben orientar hacia la parte superior central. TOP_RIGHT indica que el control se debe colocar en la parte superior derecha del mapa y que los correspondientes subelementos del mismo se deben orientar hacia la parte superior central. LEFT_TOP indica que el control se debe colocar en la parte superior izquierda del mapa, pero debajo de cualquier elemento TOP_LEFT. RIGHT_TOP indica que el control se debe colocar en la parte superior derecha del mapa, pero debajo de cualquier elemento TOP_RIGHT. LEFT_CENTER indica que el control se debe colocar en la parte lateral izquierda del mapa, centrado entre las posiciones TOP_LEFT y BOTTOM_LEFT. RIGHT_CENTER indica que el control se debe colocar en la parte lateral derecha del mapa, centrado entre las posiciones TOP_RIGHT y BOTTOM_RIGHT. LEFT_BOTTOM indica que el control se debe colocar en la parte inferior izquierda del mapa, pero sobre cualquier elemento BOTTOM_LEFT. RIGHT_BOTTOM indica que el control se debe colocar en la parte inferior derecha del mapa, pero sobre cualquier elemento BOTTOM_RIGHT. BOTTOM_CENTER indica que el control se debe colocar en la parte inferior central del mapa. BOTTOM_LEFT indica que el control se debe colocar en la parte inferior izquierda del mapa y que los correspondientes subelementos del mismo se deben orientar hacia la parte inferior central. BOTTOM_RIGHT indica que el control se debe colocar en la parte inferior derecha del mapa y que los correspondientes subelementos del mismo se deben orientar hacia la parte inferior central.

38

Ten en cuenta que estas posiciones pueden coincidir con las de los elementos de la interfaz de usuario, las cuales no se pueden modificar (como, por ejemplo, el copyright y el logotipo de Google). En estos casos, los controles se colocarn en funcin de la lgica anotada para cada posicin y aparecern en la posicin ms prxima posible a la indicada. En el siguiente ejemplo se muestra un mapa sencillo en el que se incluyen todos los controles habilitados en las diferentes posiciones.

function initialize() { var myOptions = { zoom: 12, center: new google.maps.LatLng(-28.643387, 153.612224), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.BOTTOM_CENTER }, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT },

39

streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP } } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

32. Controles personalizados

Adems de modificar el estilo y la posicin de los controles del API existentes, puedes crear tus propios controles para gestionar la interaccin con el usuario. A diferencia de las superposiciones, que se mueven con el mapa subyacente, los controles son widgets fijos colocados en posiciones absolutas. En trminos ms generales, un control es un elemento <div> que tiene una posicin absoluta en el mapa, que muestra algunos elementos de la interfaz de usuario y que gestiona la interaccin con el usuario o con el mapa, normalmente a travs de un controlador de eventos. Para poder crear tu propio control personalizado, son necesarias algunas "normas". Sin embargo, las directrices que se indican a continuacin pueden funcionar como prcticas recomendadas: Define hojas de estilo CSS adecuadas para los elementos de controles que quieres que aparezcan. Gestiona la interaccin con el usuario o con el mapa a travs de controladores de eventos para cambios realizados en la propiedad del mapa o para eventos de usuario (por ejemplo, eventos 'click'). Crea un elemento <div> para contener el control y aade este elemento a la propiedad controls del mapa Map. A continuacin, se trata cada uno de estos puntos.

33. Cmo representar controles personalizados?

La forma de representar el control depende de ti. En general, te recomendamos que coloques toda la presentacin del control en un nico elemento <div> para que puedas manipular el control como una unidad. En los ejemplos que se muestran a continuacin se utiliza este patrn de diseo. Para disear controles atractivos, es necesario disponer de conocimientos de la estructura DOM y CSS. En el cdigo que se muestra a continuacin se indica cmo se crea un control sencillo a partir de un elemento <div> contenedor, de un elemento <div> para contener el diseo del botn y de otro elemento <div> para contener el interior del botn. // Create a div to hold the control. var controlDiv = document.createElement('DIV'); // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map controlDiv.style.padding = '5px'; // Set CSS for the control border var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '2px'; controlUI.style.cursor = 'pointer';

40

controlUI.style.textAlign = 'center'; controlUI.title = 'Click to set the map to Home'; controlDiv.appendChild(controlUI); // Set CSS for the control interior var controlText = document.createElement('DIV'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = 'Home'; controlUI.appendChild(controlText);

34. Cmo gestionar eventos desde controles personalizados?

Para que un control resulte til, debe realizar alguna funcin. Las funciones del control dependen de ti. El control puede responder a la introduccin de datos realizada por el usuario o a los cambios realizados en el estado del mapa Map. Para responder a la introduccin de datos realizada por el usuarios, el API de Google Maps proporciona un mtodo de gestin de eventos en varios navegadores addDomListener() que controla la mayora de los eventos DOM admitidos del navegador. El fragmento de cdigo que se muestra a continuacin aade un detector para el evento 'click' del navegador. Ten en cuenta que este evento se recibe del DOM, no del mapa. // Setup the click event listener: simply set the map to center on Chicago var chicago = new google.maps.LatLng(41.850033, -87.6500523); google.maps.event.addDomListener(outer, 'click', function() { map.setCenter(chicago) });

35. Cmo colocar los controles personalizados?

Los controles personalizados se incluyen en el mapa colocndolos en posiciones adecuadas dentro de la propiedad controls del objeto Map. Esta propiedad contiene un conjunto de controles google.maps.ControlPosition. Para aadir un control personalizado al mapa, aade el nodo Node (normalmente el elemento <div>) al control ControlPosition adecuado. Cada posicin ControlPosition almacena un conjunto MVCArray de los controles mostrados en esa posicin. Como resultado, cuando se eliminan controles de esa posicin o se aaden a la misma, el API actualiza los controles segn corresponde. El API coloca controles en cada posicin por orden de una propiedad index, en la que primero se colocan los controles con el ndice ms bajo. Por ejemplo, dos controles personalizados ubicados en la posicin BOTTOM_RIGHT se colocarn en funcin de este orden de ndices, en el que los valores de ndice ms bajo tienen prioridad. De forma predeterminada, todos los controles personalizados se colocan despus de que se hayan colocado los controles predeterminados del API. Para anular este comportamiento, establece la propiedad index de un control en un valor negativo. Ten en cuenta que normalmente solo debes establecer un valor de ndice si deseas colocar el control "antes" de un control del API predeterminado que se encuentre en la misma posicin. El cdigo que se muestra a continuacin crea un nuevo control personalizado (no aparece su constructor) y lo aade al mapa en la posicin TOP_RIGHT.

41

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); // Construct your control in whatever manner is appropriate. // Generally, your constructor will want access to the // DIV on which you'll attach the control UI to the Map. var controlDiv = document.createElement('DIV'); var myControl = new MyControl(controlDiv); // We don't really need to set an index value here, but // this would be how you do it. Note that we set this // value as a property of the DIV itself. controlDiv.index = 1; // Add the control to the map at a designated control position // by pushing it on the position's array. This code will // implicitly add the control to the DOM, through the Map // object. You should not attach the control manually. map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

36.

Un ejemplo de un control personalizado

El control que se muestra a continuacin es sencillo (aunque no es especialmente til) y combina los patrones indicados anteriormente. Este control responde a los eventos'click' DOM centrando el mapa en una cierta ubicacin predeterminada: var map; var chicago = new google.maps.LatLng(41.850033, -87.6500523); /** * The HomeControl adds a control to the map that simply * returns the user to Chicago. This constructor takes * the control DIV as an argument. */ function HomeControl(controlDiv, map) { // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map controlDiv.style.padding = '5px'; // Set CSS for the control border var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '2px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'Click to set the map to Home'; controlDiv.appendChild(controlUI); // Set CSS for the control interior var controlText = document.createElement('DIV'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = 'Home'; controlUI.appendChild(controlText); // Setup the click event listeners: simply set the map to Chicago google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(chicago)

42

}); } function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { zoom: 12, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(mapDiv, myOptions); // Create the DIV to hold the control and call the HomeControl() constructor // passing in this DIV. var homeControlDiv = document.createElement('DIV'); var homeControl = new HomeControl(homeControlDiv, map); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); }

37.

Cmo aadir estados a los controles?

Los controles tambin pueden almacenar estados. El ejemplo que se muestra a continuacin es similar al indicado anteriormente, pero, en este caso, el control contiene un botn de establecimiento de la pgina principal que establece el control para que muestre una nueva ubicacin de la pgina principal. Para ello, creamos una propiedad home_ dentro del control para almacenar este estado y para proporcionar captadores y definidores del mismo. var map; var chicago = new google.maps.LatLng(41.850033, -87.6500523); /** * The HomeControl adds a control to the map that * returns the user to the control's defined home. */ // Define a property to hold the Home state HomeControl.prototype.home_ = null; // Define setters and getters for this property HomeControl.prototype.getHome = function() { return this.home_; } HomeControl.prototype.setHome = function(home) { this.home_ = home; } function HomeControl(map, div, home) { // Get the control DIV. We'll attach our control UI to this DIV. var controlDiv = div; // We set up a variable for the 'this' keyword since we're adding event // listeners later and 'this' will be out of scope. var control = this; // Set the home property upon construction control.home_ = home;

43

// Set CSS styles for the DIV containing the control. Setting padding to // 5 px will offset the control from the edge of the map controlDiv.style.padding = '5px'; // Set CSS for the control border var goHomeUI = document.createElement('DIV'); goHomeUI.title = 'Click to set the map to Home'; controlDiv.appendChild(goHomeUI); // Set CSS for the control interior var goHomeText = document.createElement('DIV'); goHomeText.innerHTML = 'Home'; goHomeUI.appendChild(goHomeText); // Set CSS for the setHome control border var setHomeUI = document.createElement('DIV'); setHomeUI.title = 'Click to set Home to the current center'; controlDiv.appendChild(setHomeUI); // Set CSS for the control interior var setHomeText = document.createElement('DIV'); setHomeText.innerHTML = 'Set Home'; setHomeUI.appendChild(setHomeText); // Setup the click event listener for Home: // simply set the map to the control's current home property. google.maps.event.addDomListener(goHomeUI, 'click', function() { var currentHome = control.getHome(); map.setCenter(currentHome); }); // Setup the click event listener for Set Home: // Set the control's home to the current Map center. google.maps.event.addDomListener(setHomeUI, 'click', function() { var newHome = map.getCenter(); control.setHome(newHome); }); } function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { zoom: 12, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(mapDiv, myOptions); // Create the DIV to hold the control and call the HomeControl() // constructor passing in this DIV. var homeControlDiv = document.createElement('DIV'); var homeControl = new HomeControl(map, homeControlDiv, chicago); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); }

44

45