• Author / Uploaded
• denismaernitz

Citation preview

2012

Universidad Católica Nuestra Señora de la Asunción Campus Itapuá

API Google Maps Multimedia

Integrantes: Angél Rene Penzzi Claudio Fabián Braatz Israel Gerome Van Nevel Denis Fabián Maernitz

Tabla de contenidos 1.

¿Qué es una API? ............................................................................................................................. 3

2.

Un poco de historia........................................................................................................................... 4

3.

Introducción...................................................................................................................................... 4 3.1.

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

3.2.

Cómo declarar tu aplicación como HTML5 .......................................................................... 5

3.3.

Carga del API de Google Maps ............................................................................................... 6

3.4.

Elementos DOM de mapa ........................................................................................................ 6

3.5.

Opciones de mapa..................................................................................................................... 7

3.6.

google.maps.Map: el objeto elemental .................................................................................... 7

3.7.

Carga del mapa......................................................................................................................... 8

3.8.

Latitudes y longitudes .............................................................................................................. 8

Bibliotecas en la versión 3 del API de Google Maps ..................................................................... 8

4.

4.1. Biblioteca de elementos geométricos de la versión 3 del API de JavaScript de Google Maps 9 4.2.

Conceptos de geometría esférica ............................................................................................. 9

4.3.

Funciones de distancia y área ................................................................................................ 10

4.4.

Funciones de desplazamiento ................................................................................................ 12

5.

Métodos de codificación ................................................................................................................. 14

6.

Tipos de mapa ................................................................................................................................. 15 6.1.

Tipos de mapas básicos .......................................................................................................... 15

7.

Modificación del registro del tipo de mapa .................................................................................. 16

8.

Mapas con estilos ............................................................................................................................ 17

9.

Funciones de mapas ....................................................................................................................... 17

10.

Tipos de mapas personalizados ................................................................................................. 18

11.

Coordenadas de mapa................................................................................................................ 18

11.1.

Coordenadas mundiales ......................................................................................................... 18

11.2.

Coordenadas de píxeles.......................................................................................................... 19

11.3.

Coordenadas de mosaico ....................................................................................................... 20

12.

La interfaz MapType ................................................................................................................. 20

13.

Tipos de mapa base .................................................................................................................... 21

14.

Tipos de mapa de superposición ............................................................................................... 22

15.

Tipos de mapa de imagen .......................................................................................................... 23

16.

Proyecciones................................................................................................................................ 24

2

16.1.

Implementación de una proyección .................................................................................. 24

16.2.

Transformaciones de coordenadas en proyecciones ....................................................... 24

16.3.

Selección de mosaicos de mapas en proyecciones ............................................................ 25

17.

Visión general de los eventos de mapa...................................................................................... 27

18.

Existen dos tipos de eventos: ..................................................................................................... 27

18.1.

Eventos de la interfaz de usuario .......................................................................................... 27

18.2.

Cambios de estado de MVC .................................................................................................. 28

19.

Eventos de mapa ......................................................................................................................... 28

20.

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

21.

Cómo usar cierres en detectores de eventos ............................................................................. 30

22.

Obtención y configuración de propiedades en los controladores de eventos ........................ 31

23.

Cómo detectar eventos DOM .................................................................................................... 32

24.

Controles del mapa..................................................................................................................... 33

25.

La interfaz de usuario predeterminada.................................................................................... 34

26.

El conjunto de controles predeterminado ................................................................................ 34

27.

¿Cómo inhabilitar la interfaz de usuario predeterminada? ................................................... 35

28.

¿Cómo añadir controles al mapa? ............................................................................................ 35

29.

Opciones de los controles ........................................................................................................... 36

30.

¿Cómo modificar los controles? ................................................................................................ 37

31.

¿Cómo colocar los controles? .................................................................................................... 38

32.

Controles personalizados ........................................................................................................... 40

33.

¿Cómo representar controles personalizados? ........................................................................ 40

34.

¿Cómo gestionar eventos desde controles personalizados? .................................................... 41

35.

¿Cómo colocar los controles personalizados? .......................................................................... 41

36.

Un ejemplo de un control personalizado .................................................................................. 42

37.

¿Cómo añadir estados a los controles? ..................................................................................... 43

1. ¿Qué es una API? 3

Interfaz de programación de aplicaciones o API (del inglés Application Programming Interface) es el conjunto de funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción. Son usadas generalmente en las bibliotecas (también denominadas vulgarmente "librerías"). Una interfaz de programación representa la capacidad de comunicación 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 método para conseguir abstracción en la programación, generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los superiores del software. Uno de los principales propósitos 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, evitándose el trabajo de programar todo desde el principio. Las APIs asimismo son abstractas: el software que proporciona una cierta API generalmente es llamado la implementación 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 imágenes de mapas desplazables, así como fotos satelitales del mundo e incluso la ruta entre diferentes ubicaciones o imágenes a pie de calle Street View. Desde el 6 de octubre del 2005, Google Maps es parte de Google Local. Es idéntico a Google Earth, una aplicación Windows/Mac/Linux que ofrece vistas del globo terráqueo, sea de día o de noche, pero que no es fácil de integrar a páginas Web. Ofrece, asimismo, la posibilidad de que cualquier propietario de una página Web integre muchas de sus características a su sitio. Google Maps fue anunciado por primera vez en Google Blog el 8 de febrero del 2005. Originalmente soportaría sólo 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 número de archivos de Javascript para crear Google Maps. Como el usuario puede mover el mapa, la visualización del mismo se baja desde el servidor. Cuando un usuario busca un negocio, la ubicación es marcada por un indicador en forma de pin, el cual es una imagen PNG transparente sobre el mapa. Para lograr la conectividad sin sincronía con el servidor, Google aplicó el uso de AJAX dentro de esta aplicación. Es una aplicación para el desarrollo de mapas.

3. Introducción 4

El elemento fundamental en cualquier aplicación 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 básicos de las operaciones de mapa.

3.1. El "Hello, World" de Google Maps v. 3 La manera más fácil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. La siguiente página web muestra un mapa centrado en Sydney, Nueva Gales del Sur, Australia:









Incluso en este sencillo ejemplo, hay algunas cosas que se deben tener en cuenta: 1.

Declaramos la aplicación como HTML5 mediante la declaración .

2.

Incluimos el código JavaScript del API de Google Maps mediante la etiqueta script.

3.

Creamos un elemento div denominado "map_canvas" que aloja el mapa.

4.

Creamos un objeto JavaScript literal para alojar una serie de propiedades de mapa.

5.

Escribimos una función JavaScript para crear un objeto de mapa.

6.

Inicializamos el objeto de mapa desde el evento onload de la etiqueta body. Estos pasos se explican a continuación.

3.2. Cómo declarar tu aplicación como HTML5

5

Te recomendamos que declares un DOCTYPE verdadero en tu aplicación 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 continuación:

Los navegadores más habituales mostrarán contenido declarado con este DOCTYPE en "modo estándar", lo que significa que tu aplicación deberá ser más compatible con los navegadores. El DOCTYPE también está diseñado para ajustarse de la mejor manera; así, los navegadores que no lo entiendan lo ignorarán y utilizarán 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 válidas en el modo estándar. En concreto, todos los tamaños basados en porcentajes deben heredarse de los elementos de bloque principales, y si cualquiera de estos antecesores no puede especificar un tamaño, se supondrá un tamaño de 0 x 0 píxeles. Por esta razón, incluimos la siguiente declaración Esta declaración de CSS indica que el contenedor del mapa (denominado map_canvas) debe ocupar el 100% de la altura del cuerpo de HTML. Ten en cuenta que debemos declarar de forma específica estos porcentajes tanto para como para .

3.3. Carga del API de Google Maps



La URL http://maps.google.com/maps/api/js permite acceder a la ubicación de un archivo JavaScript que carga todos los símbolos y las definiciones que se necesitan para utilizar el API de Google Maps v. 3. La página debe contener una etiqueta script que dirija a esta URL. La etiqueta de este encabezado especifica que este mapa se debe mostrar en modo de pantalla completa y el usuario no debería ser capaz de modificar su tamaño. Ten en cuenta que también debemos establecer un parámetro sensor para indicar si esta aplicación utiliza un sensor para

determinar

la

ubicación

del

usuario.

En

este

ejemplo

hemos

dejado

el

parámetro

como

la

variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false de forma explícita. Al cargar el API de JavaScript de Google Maps mediante la URL http://maps.google.com/maps/api/js, tienes la opción de cargar bibliotecas adicionales utilizando el parámetro libraries. Las bibliotecas son módulos de código 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

Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Normalmente, lo hacemos mediante la creación de un elemento div con nombre y la obtención de una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador. En el ejemplo anterior, definimos un objeto denominado "map_canvas" y definimos su tamaño mediante atributos de estilo. Ten en cuenta que este tamaño se establece en "100%", lo que amplía el mapa hasta que ocupa toda la pantalla. Es posible que sea necesario ajustar estos valores según el desplazamiento y el tamaño de la pantalla del navegador. Ten en cuenta que el mapa siempre adoptará el tamaño del elemento en el que esté contenido, por lo que siempre debes establecer un tamaño para el elemento de forma explícita.

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 inicialización correspondientes. Este objeto no se construye, sino que se crea como un objeto literal. Como queremos centrar el mapa en un punto específico, también debemos crear un valor latlng que aloje esta ubicación y la transmita a las opciones del mapa. También 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 imágenes de satélite.



HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).



TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, 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 página. (Puedes crear más de una instancia de esta clase; cada objeto definirá un mapa independiente en la página). 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 en la página 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 método document.getElementById(). Este código permite definir una variable (denominada map) y asignar dicha variable a un nuevo objeto Map, además de transmitir opciones definidas en el objeto myOptionsliteral. Estas opciones se utilizarán para inicializar las propiedades del mapa. A continuación se muestra la definición de la función Map(), conocida como constructor:

7

Constructor

Descripción

google.maps.Map(opts? )

Permite crear un nuevo mapa a partir de los parámetros opcionales transmitidos por el parámetro

3.7. Carga del mapa

Mientras se procesa una página HTML, se crea el modelo de objetos de documentos (DOM) y las imágenes y secuencias de comandos externas se reciben y se incorporan al objeto document. Para garantizar que nuestro mapa se añada a la página cuando se cargue por completo, solo ejecutamos la función que crea el objeto Map cuando el elemento de la página HTML ha recibido un evento onload. De este modo, evitamos un comportamiento impredecible y obtenemos más 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 también 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 parámetros en el orden habitual {latitud, longitud}: var myLatlng = new google.maps.LatLng(myLatitude, myLongitude) Nota: el proceso de convertir una dirección en un punto geográfico se conoce como codificación geográfica. Esta versión del API de Google Maps incluye funciones de codificación geográfica. 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 superposición de marcador en la ubicación geográfica especificada del mapa.

4. Bibliotecas en la versión 3 del API de Google Maps El código JavaScript del API de Google Maps se carga a través de una URL de inicialización con el formato http://maps.google.com/maps/api/js. Al enviar esta solicitud de inicialización, se cargan todos los símbolos y los objetos JavaScript que se utilizarán en el API de Google Maps. Algunas funciones del API de Google Maps también se encuentran disponibles a través de bibliotecas independientes que no se cargan a menos que se soliciten explícitamente. La distribución de componentes complementarios en bibliotecas permite que el API principal se cargue (y se analice) rápidamente, 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 parámetro libraries con el nombre de esas bibliotecas en la solicitud de inicialización. Si necesitas indicar varias bibliotecas, debes separarlas con comas. Una vez que se hayan cargado las bibliotecas, se podrá acceder a ellas a través del espacio de nombregoogle.maps.libraryName. A continuación se indican las bibliotecas que se encuentran disponibles actualmente.

8



geometry: incluye funciones de utilidades para el cálculo de valores geométricos escalares (como la distancia y el área) en la superficie terrestre.



adsense: permite que la aplicación 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 añadir capas de fotos de Panoramio a las aplicaciones creadas con el API de Google Maps.

En la siguiente solicitud de inicialización se muestra cómo solicitar la biblioteca google.maps.geometry del API de JavaScript de Google Maps:

4.1. Biblioteca de elementos geométricos de la versión 3 del API de JavaScript de Google Maps La biblioteca de elementos geométricos de la versión 3 del API de JavaScript de Google Maps ofrece funciones de utilidades para el cálculo de datos geométricos sobre la superficie de la Tierra. La biblioteca incluye dos espacios de nombre: 

spherical incluye utilidades de geometría esférica y te permite calcular ángulos, distancias y áreas a partir de latitudes y de longitudes.



encoding incluye utilidades para codificar y decodificar rutas de polilíneas de acuerdo con el Algoritmo de polilíneas codificadas.

La biblioteca google.maps.geometry no incluye clases; en su lugar, incluye métodos estáticos de los espacios de nombre anteriores.

4.2. Conceptos de geometría esférica Las imágenes 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 términos más 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 proyección. En las proyecciones en 2D, las imágenes pueden resultar a menudo engañosas. Como la proyección del mapa requiere necesariamente que se produzca alguna distorsión, a menudo no se puede aplicar geometría euclidiana sencilla. Por ejemplo, la distancia más corta entre dos puntos en una esfera no es una línea recta, sino un gran círculo (un tipo de geodésica), y los ángulos que configuran un triángulo en la superficie de una esfera suman más de 180 grados. Debido a estas diferencias, es necesario utilizar la geometría esférica para calcular las funciones geométricas en una esfera (o en su proyección) 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 geométricas esféricas. Este nombre de espacio ofrece métodos estáticos para calcular valores escalares a partir de coordenadas esféricas (latitudes y longitudes).

9

4.3. Funciones de distancia y área La distancia entre dos puntos es la longitud de la trayectoria más corta entre ambos puntos. La trayectoria más corta se conoce como geodésica. En una esfera todas las geodésicas son segmentos de un gran círculo. Para calcular la distancia, debes ejecutar computeDistanceBetween(), transmitiendo dos objetos LatLng. Ej

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.



París - Moscú - Pequín





Como

se

puede

observar,

la

longitud

de

la

ruta

la

calculamos

mediante

la

función

"google.maps.geometry.spherical.computeLength()", que, atención!, espera como parámetro un vector de objetos "LatLng" que representa la secuencia (ordenada) de vertices de la polilínea. Es importante tener claro que la función no espera un objeto "Polyline" sino solo sus vertices, Afortunadamente, obtener un vector con los vértices de una polilíne es tan fácil como llamar a la función "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 líneas geodésicas que unen los vértices adyacientes de la polilínea. Es decir, el número que obtenemos és la distancia mínima real (sobre la superfície 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 polilínea depende única y exclusivamente de la posición de sus vértices. Esto significa que, aunque representemos la polilínea mediante segmentos rectos respecto a la proyección (recordad: especificando la opción "geodesic: false" o, simplemente, obviando esta opción) la longitud de la polilínea no cambiará. El resto del código no presenta sorpresas. Tan solo merece ser destacado el uso de la función "Math.round()" que redondea un número decimal al número entero más próximo. 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.



Área de la Plaça de Catalunya de Barcelona





4.4. Funciones de desplazamiento Cuando te desplazas por una esfera, un ángulo es el ángulo de una dirección 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 método computeHeading(), transmitiendo dos objetos from y to LatLng. A partir de un ángulo determinado, una ubicación 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, también puedes calcular un destino entre ambos con el método interpolate(), que calcula la interpolación lineal esférica entre las dos ubicaciones, donde el valor indica la distancia fraccional a recorrer desde el origen hasta el destino. El siguiente ejemplo crea dos polilíneas cuando haces clic en dos puntos del mapa (una geodésica y una línea "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. Métodos de codificación Las trayectorias de la versión 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 codificación de poli líneas de Google para comprimir una trayectoria determinada, que posteriormente podrás descomprimir descodificándola. La biblioteca geometry incluye un nombre de espacio encoding para que las utilidades codifiquen y decodifiquen poli líneas. El método estático 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 método de la cadena codificada. El siguiente ejemplo muestra un mapa de Oxford, Misisipi (EE.UU.). Al hacer clic en el mapa se añade un punto a una poli línea. A medida que se crea la poli línea, su codificación 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 información sobre estos mapas. Un objeto MapType es una interfaz que define la visualización y el uso de mosaicos de mapas, así como la traducción de sistemas de coordenadas de pantalla a coordenadas reales (en el mapa). Cada objeto MapType debe contener algunos métodos para gestionar la recuperación 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 mayoría de los desarrolladores puede utilizar simplemente los tipos de mapas básicos que se describen a continuación. Sin embargo, también es posible definir mosaicos de mapas propios mediante tipos de mapas personalizados o modificar la presentación de tipos de mapas existentes a través de mapas con estilos. Para proporcionar tipos de mapas personalizados, debes saber cómo modificar el registro del tipo de mapa.

6.1. Tipos de mapas básicos 15

El API de Google Maps permite utilizar muchos tipos de mapas. Además de los conocidos mosaicos de mapa de carreteras "pintados", el API de Google Maps también 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 imágenes de satélite de Google Earth. MapTypeId.HYBRID, que muestra una mezcla de vistas normales y de satélite. MapTypeId.TERRAIN, que muestra mosaicos de mapas físicos a partir de la información 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 método 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 versión 3 del API de JavaScript de Google Maps utiliza un registro del tipo de mapa, que se explica a continuación, para gestionar estas referencias .

7. Modificación 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 añadiendo tipos de mapas personalizados y asociarlos a un identificador de cadena que elijas. No puedes modificar o alterar los tipos de mapas básicos (aunque puedes eliminarlos del mapa modificando la apariencia del objeto mapTypeControlOptions asociado del mapa). En el siguiente código se configura el mapa para que muestre únicamente dos tipos de mapas en el objeto mapTypeControlOptions del mismo y se modifica el registro para añadir la asociación con este identificador a la implementación 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 presentación de mapas base de Google estándar, cambiando la visualización 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 visualización (lo que incluye ocultarlos por completo). Estos cambios permiten resaltar en un mapa componentes concretos o contenido complementario incluido en la página. 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 aplicación sobre ellos de un estilo, mientras que los modificadores de estilos permiten definir las modificaciones visuales que se aplicarán a tales elementos.

9. Funciones de mapas Un mapa incluye un conjunto de funciones, como una carretera o un parque, especificados a través de un objeto MapTypeStyleFeatureType. Los tipos de funciones forman un árbol de categorías, cuya raíz es all. Al especificar la función como all, se seleccionarán todos los elementos de mapa. Algunas categorías de tipos de funciones incluyen subcategorías que se especifican separadas por puntos (por ejemplo, landscape.natural o road.local). Si se especifica la función principal (road, por ejemplo), entonces los estilos aplicados a esta selección se aplican a todas las carreteras, incluidas las subcategorías. Por otra parte, algunos de los recursos de un mapa constan de diferentes elementos. Por ejemplo, una carretera incluye, no solo la línea gráfica (geometría)que la representa sobre el mapa, sino también el texto que indica su nombre (etiquetas) en el mapa. Los elementos de las funciones se seleccionan especificando una categoría de tipo MapTypeStyleElementType. Se admiten los siguientes tipos de elementos:   

all (predeterminado) selecciona todos los elementos del recurso. geometry permite seleccionar solamente los elementos geométricos de la función correspondiente. labels selecciona solo las etiquetas de texto asociadas a una función concreta.

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

17

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

10.Tipos de mapas personalizados La versión 3 de Google Maps JavaScript API admite ahora la visualización y administración de tipos de mapas personalizados, lo que te permite implementar tus propias imágenes de mapas o superposiciones de mosaicos. La versión 3 incluye varias implementaciones de tipos de mapas posibles:  Conjuntos de mosaicos estándar, que constan de imágenes que, en su conjunto, constituyen mapas cartográficos completos. Estos conjuntos de mosaicos también se conocen como tipos de mapa base. Estos tipos de mapa actúan 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 estándar (incluyéndolo en el control MapType, por ejemplo).  Superposiciones de mosaicos de imágenes 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 información adicional y, a menudo, se limitan a ubicaciones específicas 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 imágenes, que permiten manipular la visualización de la información del mapa en el nivel más básico. Cada una de estas opciones se basa en la creación de una clase que implementa la interfaz MapType. Además, la clase ImageMapType proporciona algunos comportamientos integrados para simplificar la creación de MapType de imágenes. Antes de explicar las clases encargadas de la implementación de MapType, conviene comprender la forma en que Google Maps determina las coordenadas y decide las partes del mapa que se mostrarán. Deberán implementarse una lógica similar para cualquier MapType de superposición 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 estándar WGS84 o Sistema Geodésico Mundial).  Coordenadas mundiales que hacen referencia a un punto único en el mapa.  Coordenadas de mosaico que hacen referencia a un mosaico específico del mapa en el nivel de zoom aplicado.

11.1.

Coordenadas mundiales

Siempre que Maps API necesite convertir una ubicación del mundo en una ubicación del mapa (la pantalla), primero deberá convertir los valores de latitud y longitud en una coordenada "mundial". Esta conversión se realiza mediante una proyección cartográfica. Google Maps utiliza la proyección de Mercator con este propósito. También puedes definir tu propia proyección mediante la implementación de la interfaz google.maps.Projection. (Ten en cuenta que las interfaces de la versión 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 cálculo de las coordenadas en píxeles, asumimos que un mapa en el nivel de zoom 0 es un único mosaico del tamaño de mosaico base. A continuación, definimos las coordenadas mundiales de acuerdo

18

con el sistema de coordenadas en píxeles en el nivel de zoom 0, utilizando la proyección para convertir latitudes y longitudes en posiciones de píxel en este mosaico base. Esta coordenada mundial es un valor de punto flotante medido desde el origen de la proyección del mapa hasta la ubicación específica. Ten en cuenta que como este valor es un valor de punto flotante, puede ser mucho más preciso que la resolución 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 proyección 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 dirección este (derecha) y a lo largo del eje y en dirección sur (abajo). Dado que el mosaico base de la proyección de Mercator en Google Maps es de 256 x 256 píxeles, el espacio de coordenadas mundiales que se puede utilizar equivale a {0256}, {0-256}.

Ten en cuenta que una proyección de Mercator tiene un ancho longitudinalmente finito, pero un alto latitudinalmente infinito. "Cortamos" la imagen del mapa base que utiliza una proyección de Mercator en +/- 85 grados aproximadamente para que el mapa resultante tenga forma rectangular, con lo que la selección de mosaicos presenta una lógica mucho más sencilla. Ten en cuenta que es posible que una proyección produzca coordenadas mundiales que se sitúen fuera del espacio de coordenadas utilizables del mapa base si te acercas demasiado a los polos, por ejemplo.

11.2.

Coordenadas de píxeles

Las coordenadas mundiales representan ubicaciones absolutas en una proyección dada, pero necesitamos convertirlas en coordenadas de píxeles para determinar la desviación en "píxeles" en un nivel de zoom concreto. Estas coordenadas de píxeles se calculan mediante la fórmula siguiente: pixelCoordinate = worldCoordinate * 2zoomLevel De la ecuación anterior, fíjate 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 resolución que cuadriplica la del nivel precedente. Por ejemplo, en el nivel de zoom 1, el mapa consta de cuatro mosaicos de 256 x 256 píxeles, lo que equivale a un espacio en píxeles de 512 x 512. En el nivel de zoom 19, se puede hacer referencia a cada píxel x e y del mapa utilizando un valor entre 0 y 256 * 219. Dado que basamos las coordenadas mundiales en el tamaño de mosaico del mapa, la parte entera de las coordenadas de píxeles permite identificar el píxel exacto en dicha ubicación en el nivel de zoom actual. Ten en cuenta que en el nivel de zoom 0, las coordenadas de píxeles equivalen a las coordenadas mundiales. Ahora ya disponemos de un método para representar con precisión todas las ubicaciones del mapa en todos los niveles de zoom. Google Maps API construye una ventana gráfica a partir del centro del nivel de zoom del mapa (como LatLng) y el tamaño del elemento DOM que lo contiene y convierte este cuadro delimitador en coordenadas de píxeles. El API determina entonces de forma lógica todos los mosaicos del mapa incluidos dentro de los límites de píxeles

19

especificados. Se hace referencia a cada uno de estos mosaicos de mapa mediante coordenadas de mosaico, que simplifican enormemente la visualización de las imágenes del mapa.

11.3.

Coordenadas de mosaico

Lo más probable es que Google Maps API no pueda cargar todas las imágenes del mapa en los niveles de zoom superiores, que resultan de mayor utilidad; en su lugar, Google Maps API descompone las imágenes de cada nivel de zoom en un conjunto de mosaicos de mapa organizados de forma lógica en el orden que comprende la aplicación. Cuando se desplaza un mapa a una ubicación nueva o a un nivel de zoom nuevo, Google Maps API determina los mosaicos necesarios mediante las coordenadas de píxeles y convierte estos valores en un conjunto de mosaicos para su recuperación. Estas coordenadas de mosaico se asignan mediante un esquema que hace que resulte fácil determinar desde un punto de vista lógico el mosaico que contiene las imágenes correspondientes a un punto específico. En Google Maps, los mosaicos se numeran desde el mismo origen que los píxeles. Para la implementación en Google de la proyección de Mercator, el mosaico de origen se encuentra siempre en la esquina más 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 píxeles por el tamaño 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 métodos que permiten que el API inicie solicitudes en los tipos de mapa cuando determine que necesita mostrar mosaicos de mapa en la ventana gráfica 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 imágenes 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 tamaño 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 máximo con el que se mostrarán los mosaicos de este tipo de mapa.

20

 minZoom (obligatoria) especifica el nivel de zoom mínimo con el que se mostrarán los mosaicos de este tipo de mapa. De forma predeterminada, este valor es 0, lo que indica que no existe ningún nivel de zoom mínimo.  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 ratón sobre determinado elemento. Esta propiedad solo es necesaria si deseas que este tipo de mapa se pueda seleccionar en el control MapType. (Consulta la sección Cómo añadir controles MapType incluida más adelante). Además, las clases que implementan la interfaz MapType necesitan que implementes los siguientes métodos:  getTile() (obligatorio) se ejecuta siempre que el API determina que es necesario mostrar en el mapa mosaicos nuevos en la ventana gráfica correspondiente. El método 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 gráfica y el nivel de zoom actuales del mapa. El controlador de este método debe devolver un elemento HTML a partir de una coordenada transmitida, el nivel de zoom y el elemento DOM en el que añadir 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 visión. Este método debe poseer la siguiente firma: releaseTile(tile:Node) Normalmente, la eliminación de cualquier elemento asociado a los mosaicos del mapa se realiza después de añadirlos a este. Por ejemplo, si has asociado detectores de eventos a las superposiciones de mosaicos de mapa, deberás eliminarlos aquí. El método getTile() funciona como el principal controlador para determinar los mosaicos que se cargarán en una ventana gráfica 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, añade el MapType personalizado a la propiedad mapTypes de Map. Esta propiedad es de tipo MapTypeRegistry. El código 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 superposición 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 interés o datos adicionales al usuario. (La capa de tráfico 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 añadir 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 superposición) se representan en la capa mapPane. Los tipos de mapa de superposición 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 idéntico al anterior, con la excepción de que hemos creado una superposición 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 implementación 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 más utilizados: tipos de mapa que constan de mosaicos compuestos de archivos de una sola imagen. Esta clase, la clase ImageMapType, se construye a través de una especificación de objeto ImageMapTypeOptions que define las siguientes propiedades obligatorias:  

tileSize (obligatoria) especifica el tamaño del mosaico (de tipo google.maps.Size). Es necesario que tengan forma rectangular, aunque no necesariamente han de ser cuadrados. getTileUrl (obligatoria) especifica la función, normalmente proporcionada como un literal de función insertado, para procesar la selección del mosaico de imagen adecuado en el nivel de zoom y las coordenadas mundiales que se han proporcionado.

El código siguiente implementa un tipo ImageMapType básico mediante los mosaicos de tráfico 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 representación en dos dimensiones. El mapa que visualizas en el API de Google Maps, al igual que cualquier representación plana de la Tierra, es una proyección de esa esfera en una superficie plana. En sus términos más básicos, una proyección se puede definir como una asignación de valores de latitud y longitud a las coordenadas del mapa de la proyección. En el API de Google Maps, las proyecciones deben implementar la interfaz Projection. La implementación de un objeto Projection debe proporcionar no solo una asignación de un sistema de coordenadas a otro, sino también una asignación bidireccional. Es decir, debes determinar cómo traducir desde las coordenadas de la Tierra (LatLng) hasta el sistema de coordenadas mundiales de la proyección (Projection), y viceversa. Google Maps utiliza la proyección de Mercator para crear sus mapas a partir de datos geográficos y convertir eventos del mapa en coordenadas geográficas. Puedes obtener esta proyección ejecutando getProjection() en el mapa (Map) (o cualquier de los tipos de mapas (MapType) base estándar). En la mayoría de usos, bastará con esta proyección (Projection), aunque también podrás definir y utilizar tu propias proyecciones personalizadas.

16.1.

Implementación de una proyección

A la hora de implementar una proyección personalizada, debes definir los siguientes elementos:   

Las fórmulas para cambiar coordenadas de latitud y longitud a un plano cartesiano y viceversa. (La interfaz Projection solo admite transformaciones a coordenadas rectilíneas). El tamaño del mosaico base. Todos los mosaicos deben ser rectangulares. El "tamaño 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 tamaño del mundo coincide con el tamaño del mosaico base.

16.2.

Transformaciones de coordenadas en proyecciones

Cada proyección proporciona dos métodos que realizan conversiones entre estos dos sistemas de coordenadas, lo que te permite convertir coordenadas geográficas en mundiales y viceversa:  

El método Projection.fromLatLngToPoint() convierte un valor LatLng en una coordenada mundial. Este método se utiliza para posicionar superposiciones en el mapa (y para posicionar el mapa en sí). El método Projection.fromPointToLatLng() convierte una coordenada mundial en un valor LatLng. Este método se utiliza para convertir eventos, como los clics que se registran en el mapa, en coordenadas geográficas.

Google Maps supone que las proyecciones son rectilíneas. Generalmente, puedes utilizar una proyección 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 proyección también sean rectilíneas y normales. Algunas proyecciones (especialmente, las proyecciones cónicas) pueden ser "localmente normales" (es decir, apuntan al norte), aunque se desvían del norte absoluto; por ejemplo, cuanto más alejado se coloque el mapa con respecto a alguna longitud de referencia. Puedes utilizar localmente una proyección de este tipo, pero debes tener en cuenta que la proyección es necesariamente imprecisa y que los errores de transformación serán mayores cuanto más te desvíes de la longitud de referencia.

24

16.3.

Selección de mosaicos de mapas en proyecciones

Las proyecciones además 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 proyección del mapa y un método getTile() para recuperar los mosaicos del mapa en función de los valores de coordenadas del mosaico. Las coordenadas del mosaico se basan en el tamaño del mosaico básico (que debe ser rectangular) y el "tamaño del Mundo" de tu mapa, que es el tamaño de píxel 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 tamaño que el Mundo). Defines el tamaño del mosaico base en la propiedad tileSize de MapType. Defines el tamaño del Mundo implícitamente en los métodos fromLatLngToPoint() y fromPointToLatLng() de tu proyección. Debido a que la selección de las imágenes depende de estos valores transmitidos, es útil establecer un nombre para las imágenes que se puedan seleccionar automáticamente, en función de estos valores transmitidos, como por ejemplo map_zoom_tileX_tileY.png. El siguiente ejemplo define un ImageMapType con la proyección 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