Guia Mapas

Google Maps API V3 introduccin y primeros pasos
Google Maps fue desarrollado originalmente por dos hermanos Daneses, Lars y Jens Rasmussen, cofundadores de Where 2 Technologies una empresa dedicada a la creacin de soluciones de mapeo. La empresa fue adquirida por Google en octubre de 2004, y los dos hermanos luego crearon Google Maps (tambin son los que estn detrs de Google Wave). Antes de que hubiera una API pblica, algunos desarrolladores descubrieron la manera de hackear Google Maps para incorporar los mapas en sus propios sitios web. Esto llev a Google a la conclusin de que haba una necesidad de una API pblica, y en junio de 2005 fue lanzado pblicamente. El mashup por primera vez en Internet es a menudo considerado que lo ejerci Housingmaps.com, una combinacin de Google Maps con los listados de bienes races de Craiglist.org. Fue creado de hecho antes de la API pblica fuera puesto en libertad y fue hackeado por el desarrollador Paul Rademacher. En mayo de 2010, se anunci la versin 3 del API. Ahora es la opcin recomendada para las nuevas aplicaciones de Google Maps y el siguiente paso en la historia de Google Maps.
Cmo funciona Google Maps?

Es slo HTML, CSS y JavaScript trabajando junto. Los mapas son solo imgenes que se cargan en el fondo a travs de peticiones ejecutadas por la tecnologa de AJAX, y se insertan en un <div> en la pgina HTML. Mientras navegas en el mapa, el API enva informacin acerca de las nuevas coordenadas y los niveles de zoom de el mapa a travs de AJAX y esto retorna las imgenes. El API consiste de archivos JavaScript que contienen las clases, mtodos y propiedades que se usan para el comportamiento de los mapas. Cmo se usan?, de eso se trata esta gua. Esta gua tratar acerca de la ltima versin creada al momento, la versin 3.
Las coordenadas estn expresadas usando nmeros decimales separados por coma. La latitud siempre precede la longitud. La latitud es positiva si va despus del punto mostrado en el mapa y negativo si va antes. La longitud es positiva si va arriba del punto y negativa si va debajo. En los mapas fsicos, las coordenadas estn expresadas en grados, as que la posicin de Puerto Rico sera: 181470 N 662968 W La forma de convertir estos datos a decimales sera: (181470 N) = (18 + (14 / 60) + (70 / 3600)) = 18.252 (662968 W) = -(66 + (29 / 60) + (68 / 3600)) = -66.8627 La longitud se multiplica por negativo, porque est a la izquierda (oeste) del punto 0,0. Para esta gua solo vamos a estar trabajando con decimales.
Cunto es el mximo de decimales?

Google maps no se limita a cierta cantidad de decimales. Sin embargo, segn unas pruebas hechas, se not que nmeros mayores a 6 decimales es una perdida de tiempo. As tambin google estableci en varios mtodos que la mayor cantidad a trabajar es 6 decimales, como por ejemplo el mtodo toUrlValue(). Es decir, cuando vayamos a establecer los decimales se puede hacer as: 5 a 6 decimales: es el mximo que debemos usar para ser especficos 4 decimales: para algn detalle en el mapa 3 decimales: es bueno para centrar ciudades 2 decimales: es apropiado para centrar paises o estados, tal vez 3 por monaco
Preparando el rea de trabajo

Para propsito de enseanza tomaremos el 100% de ancho y el 100% de alto del navegador. Tambin nos
limitaremos a explicar solo la parte del API. Para referencia sobre el ltimo API que contiene las clases, mtodos y propiedades pueden ir a la direccin http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.html ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 01 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 05 <title>test</title> 06 <style> 07 *{ margin: 0; padding: 0; } 08 html, body, #map{ 09 width: 100%; 10 height: 100%; 11 } 12 </style> 13 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 14 sensor=false&language=es"></script> 15 <script type="text/javascript" src="js/map.js"></script> 16 </head> 17 <body> 18 <div id="map"></div> 19 </body> </html> En el siguiente cdigo: ? <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false&;amp;language=es"></script> La direccin apunta al API, pero tambin se requiere pasar una cadena de consulta con la llave sensor. Esto le indica a Google si el dispositivo que usa el mapa, tiene un dispositivo que determina la geolocalizacin, como por ejemplo un GPS. Es forzoso mencionarlo y como valor indicar si es falso o cierto. Falso para los que no lo usan y cierto para los que s lo usan. Esto lo usa Google para proveer estadsticas a sus proveedores. No tiene que ver con habilitarlo para la geolocalizacin. 1 Tambin se aadi el lenguaje, aunque el API trata de determinar cual es el lenguaje a mostrar, pero puedes especificarlo usando la llave language. En este ejemplo no hemos mencionado la llave api ya que para la versin 3 no se usa. ? 1 <script type="text/javascript" src="map.js"></script> Es importante que el cdigo mencionado anteriormente, se encuentre debajo del elemento <script> que incluye el API, para que as se pueda cargar todas las clases, mtodos y propiedades a usar. Las clases, mtodos y propiedades comienzan con google.maps. A eso se le conoce como namespace. Dentro del archivo map.js escribimos: ? 1 window.onload = function(){ 2 var options = {
zoom: 8 3 , center: new google.maps.LatLng(18.2, -66.4) 4 , mapTypeId: google.maps.MapTypeId.SATELLITE 5 }; 6 var map = new google.maps.Map(document.getElementById('map'), 7 options); 8 };
Esto nos trae el mapa de Puerto Rico. Qu es lo que hace? Primero indicamos que queremos que el mapa se muestre una vez se haya cargado toda la informacin con el evento window.onload. Para iniciar el mapa hacemos uso de la clase google.maps.Map(). A este se le indica dos argumentos: La referencia hacia el elemento que mostrar el mapa, en este caso el elemento <div> con el atributo id que tiene como valor map. Una notacin literal llamada MapOptions que contiene la configuracin inicial para mostrar el mapa como por ejemplo, el zoom, donde est el centro y que tipo de mapa deseamos mostrar.
MapOptions
MapOptions contiene la informacin de cmo queremos ver el mapa y cmo queremos que se comporte. Se requiere tres propiedades: zoom: Define el zoom inicial. Debe ser un nmero entre el 1 y el 23. El 1 es el mapa completamente afuera y 23 es completamente adentro. center: Define el centro del mapa con las coordenadas. Las coordenadas debe indicarse usando el mtodo google.maps.LatLng(latitud, longitud). mapTypeId: Define que tipo de mapa se desea mostrar al inicio. Los opcionales son: keyboardShortcuts: Habilita o inhabilita el uso del teclado. Las teclas a usar son las flechas para mover el mapa y +/- para el zoom. Valores: true|false, por defecto true. disableDoubleClickZoom: Habilita o inhabilita el doble click del ratn para hacer zoom.
Valores: true|false por defecto false. draggable: Habilita o inhabilita el poder arrastrar el mapa. Valores: true|false, por defecto true. scrollwheel: Habilita o inhabilita el poder hacer zoom con la rueda del ratn. Valores: true|false, por defecto true. draggableCursor: Indica que tipo de cursor deseas mostrar cuando el ratn est encima del mapa. El valor es del tipo cadena y pueden ser los que una computadora tiene por defecto y la mayora de los que estn mencionado en el siguiente listado o puede ser uno personalizado y la ruta puede ser local (en el servidor de la aplicacin) o una direccin web externa. draggingCursor: Indica que tipo de cursor deseas mostrar cuando el ratn est presionado en el mapa. El valor es del tipo cadena y pueden ser los que una computadora tiene por defecto y la mayora de los que estn mencionado en el siguiente listado o puede ser uno personalizado y la ruta puede ser local (en el servidor de la aplicacin) o una direccin web externa. backgroundColor: Esta propiedad afecta el color del fondo del contenedor. Tpicamente se ve cuando se arrastra el mapa o cuando carga al inicio. Puedes usar un valor hexadecimal o la forma estndar (red, yellow, green, blue, etc). Por defecto el color es con el valor hexdecimal #E5E3DF noClear: Habilita o inhabilita que se sobre-escriba lo que haya en el contenedor. Por lo regular la forma como se trabaja para colocar contenido encima del contenedor es usando un elemento fuera del contenedor que muestra el mapa y con CSS se coloca en el lugar deseado en el mapa. Valores: true|false, por defecto false. disableDefaultUI: Habilita o inhabilita mostrar el UI que viene predefinido. Valores: true|false, por defecto false. mapTypeControl: Habilita o inhabilita el control de tipo de mapa. mapTypeControlOptions: Son las opciones de visualizacin iniciales del control de tipo de mapa. navigationControl: Habilita o inhabilita el control de navegacin. Valores: true|false, por defecto true. navigationControlOptions: Son las opciones de visualizacin iniciales del control de navegacin. scaleControl: Habilita o inhabilita el control de escala. Valores: true|false, por defecto true. scaleControlOptions: Son las opciones de visualizacin iniciales del control de escala. streetViewControl: Habilita o inhabilita el hombrecito de Street View. Est disponible en ciertas reas. Valores: true|false, por defecto false. Modificamos y aadimos el siguiente cdigo al archivo map.js ? 01 window.onload = function(){ 02 var options = { 03 zoom: 8 04 , center: new google.maps.LatLng(18.2, -66.4) 05 , mapTypeId: google.maps.MapTypeId.SATELLITE 06 , backgroundColor: '#ffffff' 07 , noClear: true 08 , disableDefaultUI: true 09 , keyboardShortcuts: false
10 11 , disableDoubleClickZoom: true 12 , draggable: false 13 , scrollwheel: false 14 , draggableCursor: 'move' , draggingCursor: 'move' 15 , mapTypeControl: true 16 , mapTypeControlOptions: { 17 style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU 18 , position: google.maps.ControlPosition.TOP_LEFT 19 , mapTypeIds: [ 20 google.maps.MapTypeId.SATELLITE 21 ] 22 } 23 , navigationControl: true 24 , streetViewControl: true 25 , navigationControlOptions: { 26 position: google.maps.ControlPosition.TOP_RIGHT 27 , style: google.maps.NavigationControlStyle.ANDROID 28 } 29 , scaleControl: true 30 , scaleControlOptions: { 31 position: google.maps.ControlPosition.TOP_LEFT 32 , style: google.maps.ScaleControlStyle.DEFAULT 33 } 34 }; 35 var map = new google.maps.Map(document.getElementById('map'), 36 options); 37 }; 38
Modificar los valores ya asignados

Hasta ahora, hemos iniciado los valores directamente en el MapOptions para iniciar el mapa. Luego de
que se hayan cargado, podemos modificarlos con el mtodo setOptions. Podemos modificar la ? mayora de las propiedades. Solo tres no son modificables: noClear, backgroundColor y 01 window.onload = function(){ disableDefaultUI, por lo que debemos estar seguros qu debemos hacer con ellos al inicio. El 02 var options = { setOptions es de gran utilidad para interactuar con el usuario. Veamos un ejemplo 03 zoom: 8 04 , center: new google.maps.LatLng(18.2, -66.4) 05 , mapTypeId: google.maps.MapTypeId.SATELLITE 06 , backgroundColor: '#ffffff' 07 , noClear: true 08 , disableDefaultUI: true 09 , keyboardShortcuts: false 10 , disableDoubleClickZoom: true 11 , draggable: false 12 , scrollwheel: false 13 , draggableCursor: 'move' 14 , draggingCursor: 'move' 15 , mapTypeControl: true 16 , mapTypeControlOptions: { 17 style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU 18 , position: google.maps.ControlPosition.TOP_LEFT 19 , mapTypeIds: [ 20 google.maps.MapTypeId.SATELLITE 21 ] 22 } 23 , navigationControl: true 24 , streetViewControl: true 25 , navigationControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT 26 , style: google.maps.NavigationControlStyle.ANDROID 27 } 28 , scaleControl: true 29 , scaleControlOptions: { 30 position: google.maps.ControlPosition.TOP_LEFT 31 , style: google.maps.ScaleControlStyle.DEFAULT 32 } 33 }; 34 var map = new google.maps.Map(document.getElementById('map'), 35 options); 36 map.setOptions({ 37 zoom: 10 38 , center: new google.maps.LatLng(18.17, -66.42) 39 , mapTypeId: google.maps.MapTypeId.TERRAIN 40 , keyboardShortcuts: true 41 , disableDoubleClickZoom: false 42 , draggable: true 43 , scrollwheel: true 44 , draggableCursor: 'hand' 45 , draggingCursor: 'hand' 46 , mapTypeControlOptions: { 47 style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
48 49 50 51 52 , position: google.maps.ControlPosition.TOP_RIGHT 53 , mapTypeIds: [ 54 google.maps.MapTypeId.ROADMAP 55 , google.maps.MapTypeId.SATELLITE 56 ] 57 } 58 , navigationControlOptions: { 59 position: google.maps.ControlPosition.TOP_LEFT 60 , style: google.maps.NavigationControlStyle.ZOOM_PAN 61 } 62 , scaleControlOptions: { 63 position: google.maps.ControlPosition.BOTTOM_LEFT 64 , style: google.maps.ScaleControlStyle.DEFAULT 65 } 66 }); 67 }; 68 69 70 71
Getters y Setters
Existen unos mtodos que nos permiten solo modificar y/o obtener los resultados de las propiedades que son requisitos. getZoom() setZoom(1-23) getCenter()
setCenter(google.maps.LatLng(latitud, longitud)) getMapTypeId() setMaptTypeId(google.maps.MapTypeId.*)
Uniendo todo
? 01 window.onload = function(){ 02 var options = { 03 zoom: 8 04 , center: new google.maps.LatLng(18.2, -66.4) 05 , mapTypeId: google.maps.MapTypeId.SATELLITE 06 , backgroundColor: '#ffffff' 07 , noClear: true 08 , disableDefaultUI: true 09 , keyboardShortcuts: false 10 , disableDoubleClickZoom: true 11 , draggable: false 12 , scrollwheel: false 13 , draggableCursor: 'move' 14 , draggingCursor: 'move' 15 , mapTypeControl: true 16 , mapTypeControlOptions: { 17 style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU 18 , position: google.maps.ControlPosition.TOP_LEFT 19 , mapTypeIds: [ 20 google.maps.MapTypeId.SATELLITE 21 ] 22 } 23 , navigationControl: true 24 , streetViewControl: true 25 , navigationControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT 26 , style: google.maps.NavigationControlStyle.ANDROID 27 } 28 , scaleControl: true 29 , scaleControlOptions: { 30 position: google.maps.ControlPosition.TOP_LEFT 31 , style: google.maps.ScaleControlStyle.DEFAULT 32 } 33 }; 34 var map = new google.maps.Map(document.getElementById('map'), 35 options); 36 map.setOptions({ 37 zoom: 10 38 , center: new google.maps.LatLng(18.17, -66.42) 39 , mapTypeId: google.maps.MapTypeId.TERRAIN 40 , keyboardShortcuts: true 41 , disableDoubleClickZoom: false
42 43 44 45 46 47 48 , draggable: true 49 , scrollwheel: true 50 , draggableCursor: 'hand' 51 , draggingCursor: 'hand' 52 , mapTypeControlOptions: { 53 style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 54 , position: google.maps.ControlPosition.TOP_RIGHT 55 , mapTypeIds: [ 56 google.maps.MapTypeId.ROADMAP 57 , google.maps.MapTypeId.SATELLITE 58 ] 59 } 60 , navigationControlOptions: { 61 position: google.maps.ControlPosition.TOP_LEFT 62 , style: google.maps.NavigationControlStyle.ZOOM_PAN 63 } 64 , scaleControlOptions: { 65 position: google.maps.ControlPosition.BOTTOM_LEFT 66 , style: google.maps.ScaleControlStyle.DEFAULT 67 } 68 }); 69 map.setZoom(9); 70 var zoomLevel = map.getZoom(); 71 map.setCenter(new google.maps.LatLng(18.17, -66.3)); 72 var centerOfMap = map.getCenter(); 73 map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 74 var mapTypeIdOfMap = map.getMapTypeId(); 75 alert(zoomLevel + ' -- ' + centerOfMap + ' -- ' + mapTypeIdOfMap); 76 }; 77 78 79 80 81 82
Marcadores, posicionar una imagen en el mapa

El uso ms comn del mapa es visualizar la posicin geogrfica de algo, los marcadores son los ideales para lograrlo. Un marcador es bsicamente una pequea imagen posicionada en un lugar especfico del mapa.
rea de trabajo
Usaremos el mismo rea de trabajo del primer captulo (Google Maps API V3 introduccin y primeros pasos): ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 06 <title>test</title> 07 <style> 08 *{ margin: 0; padding: 0; } 09 html, body, #map{ 10 width: 100%; 11 height: 100%; 12 } 13 </style> 14 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 15 sensor=false&language=es"></script> 16 <script type="text/javascript" src="js/map.js"></script> 17 </head>
<body> 18 <div id="map"></div> 19 </body> </html> Dentro del archivo map.js, es donde estaremos trabajando el resto de los ejemplos.
Crear marcador
Para crear un marcador, necesitas usar el objeto google.maps.Marker. Este toma un slo argumento y es google.maps.MarkerOptions. MarkerOptions tiene varias propiedades que puedes usar para hacer que el marcador se vea y comporte de diversas formas. Solo dos propiedades son requisitos: position: Define las coordenadas donde el marcador va a estar posicionado. Toma las coordenadas usando el mtodo google.maps.LatLng. map: Es una referencia al mapa donde quieres aadir el marcador. Estos son algunas de las opciones que se pueden usar en el marcador: ? 01 window.onload = function(){ 02 var options = { 03 zoom: 9 04 , center: new google.maps.LatLng(18.2, -66.5) 05 , mapTypeId: google.maps.MapTypeId.ROADMAP 06 }; 07 var map = new google.maps.Map(document.getElementById('map'), 08 options); 09 new google.maps.Marker({ 10 position: map.getCenter() 11 , map: map 12 , title: 'Pulsa aqu' 13 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png' 14 , cursor: 'default' 15 , draggable: true 16 }); 17 }; 18
Notas: Si deseamos que el marcador no se pueda seleccionar podemos inhabilitarlo usando clickable y como valor false. No podemos habilitar draggable porque eso sobre-escribira el valor establecido en el clickable, ya que para poder mover el marcador se requiere que se pueda seleccionar. En la direccin http://gmaps-samples.googlecode.com/svn/trunk/markers/{color}/marker{n}.png puedes obtener diferentes tipos de marcadores, donde {color} puede ser: blue, green, orange, pink y red. {n} puede ser un nmero entre el 1 y el 99 y para los que no se requiere nmero se puede usar blank.png, as como en el ejemplo. Ms marcadores en http://code.google.com/p/google-maps-icons/wiki/AllUpdates.
InfoWindow
Para aadir la burbuja que contiene informacin acerca del marcador solo tienes que hacer referencia a la clase google.maps.InfoWindow y esta toma un solo argumento que es google.maps.InfoWindowOptions. InfoWindowOptions tiene varias propiedades, pero la ms importante es content. En esa propiedad podemos aadir cualquier tipo de datos que queramos, como por ejemplo: texto plano, HTML, video y puedes modificar el contenido usando CSS. Para poder visualizar la burbuja se requiere usar el mtodo open que est disponible en la clase google.maps.InfoWindow. Este mtodo tiene dos argumento y el primero es requisito: map: Es una referencia al objeto que contiene el mapa que se va a usar (la razn es que puede que tengamos varios mapas en la misma pgina) o StreetViewPanorama El objeto en donde se quiere aadir la burbuja. Esta es opcional si se menciona la propiedad
position en el InfoWindowOptions. ? 01 02 window.onload = function(){ 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var marker = new google.maps.Marker({ 11 position: map.getCenter() 12 , map: map 13 , title: 'Pulsa aqu' 14 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' 15 }); 16 var popup = new google.maps.InfoWindow({ 17 content: 'Wohoooo, sali el InfoWindow, pero por qu sale 18 exactamente en el punto del marcador?' 19 , position: map.getCenter() 20 }); 21 popup.open(map); 22 }; 23
Si prestamos atencin, vemos que la posicin de la burbuja es exactamente donde est ubicado el marcador, pero la realidad es que deseamos que la burbuja aparezca encima del marcador. Una forma de
lograrlo es creando una nueva instancia de google.maps.LatLng y asignando valores que logre colocar la burbuja encima del marcador. Otra forma y la ms sencilla es asignando el segundo argumento del mtodo de open e indicar que tome como base el marcador. ? 01 02 window.onload = function(){ 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var marker = new google.maps.Marker({ 11 position: map.getCenter() 12 , map: map 13 , title: 'Pulsa aqu' 14 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/pink/blank.png' 15 }); 16 var popup = new google.maps.InfoWindow({ 17 content: 'Wohoooo, sali el InfoWindow y encima del marcador, ahora 18 qu ms puedo hacer con esto?' 19 }); 20 popup.open(map, marker); 21 }; 22
Si queremos visualizar la ventana usando algn evento (cuando se pulse el ratn, o cuando presionemos
alguna tecla) se puede usar el mtodo google.maps.event.addListener(). Requiere de tres argumentos: El objeto a aadir El evento que debe escuchar Una funcin que se ejecutar cuando ocurra el evento. Esta funcin se le conoce como gestin de eventos (event handler en ingles) ? 01 02 window.onload = function(){ 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var marker = new google.maps.Marker({ 11 position: map.getCenter() 12 , map: map 13 , title: 'Pulsa aqu' 14 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png' 15 }); 16 var popup = new google.maps.InfoWindow({ 17 content: 'Wohoooo, sali el InfoWindow cuando puls el marcador, 18 pero hay ms?' 19 }); 20 google.maps.event.addListener(marker, 'click', function(){ 21 popup.open(map, marker); 22 }); 23 }; 24
Para una lista de los eventos, pueden verlo en la clase google.maps.Map en la categora que dice Events.
Aadir varios marcadores

Podemos aadir varios marcadores de la misma forma como hemos aadido uno. Se puede hacer ingresndolo uno a uno o en forma ms dinmica usando arrays. ? 01 window.onload = function(){ 02 var n=1; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var place = new Array(); 11 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); 12 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 13 for(var i in place){ 14 var marker = new google.maps.Marker({ 15 position: place[i] 16 , map: map 17 , title: i 18 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/red/marker' + n++ + 19 '.png' 20 });
21 google.maps.event.addListener(marker, 'click', function(){ 22 var popup = new google.maps.InfoWindow(); 23 var note = 'Wohoooo, sali el InfoWindow cuando puls el marcador y 24 en el lugar: ' + i 25 + ', pero por qu todos se muestran en ' + i + '?'; 26 popup.setContent(note); 27 popup.open(map, marker); 28 }) 29 } 30 }; 31
Siempre que seleccionamos cualquier marcador nos dar el ltimo creado en el array. La razn es que estamos usando como referencia la variable y no el valor, y esto siempre nos dar el ltimo valor indicado en el array. Hay varias formas de corregirlo. Una de las formas ms sencilla es hacer referencia al objeto corriente usando la palabra clave this: ? 01 window.onload = function(){ 02 var n=1; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var place = new Array(); 11 place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
12 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 13 for(var i in place){ 14 var marker = new google.maps.Marker({ 15 position: place[i] 16 , map: map 17 , title: i 18 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/red/marker' + n++ + 19 '.png' 20 }); 21 google.maps.event.addListener(marker, 'click', function(){ 22 var popup = new google.maps.InfoWindow(); 23 var note = 'Wohoooo, sali el InfoWindow cuando puls el marcador y 24 en el lugar: ' + this.title 25 + ', por fin se arreglo, pero por qu salen varias burbujas?'; 26 popup.setContent(note); 27 popup.open(map, this); 28 }); 29 } 30 }; 31
Otra situacin que se presenta es que si seleccionas una burbuja y luego otra, tanto la primera como la segunda se quedan abiertas. Para la versin 2 automticamente se cerraban. En la versin 3 ya no hay esa limitacin. Esto puede representar una ventaja y desventaja. Entre las ventajas es posible ahora comparar datos en ambas burbujas y verlo a la misma vez. Entre las desventajas es que tenemos ms clicks y puede que se vuelva problemtico. Una forma de evitar que salgan varias burbujas es, declarar la variable que guarda la instancia de InfoWindow fuera del bucle y luego en la funcin del evento verificar si existe ya una instancia, si no es as entonces crearla, si
es as usar la que ya existe. ? 01 window.onload = function(){ 02 var popup; 03 var n=1; 04 var options = { 05 zoom: 9 06 , center: new google.maps.LatLng(18.2, -66.5) 07 , mapTypeId: google.maps.MapTypeId.ROADMAP 08 }; 09 var map = new google.maps.Map(document.getElementById('map'), 10 options); 11 var place = new Array(); 12 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); 13 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 14 for(var i in place){ 15 var marker = new google.maps.Marker({ 16 position: place[i] 17 , map: map 18 , title: i 19 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/marker' + n++ + 20 '.png' 21 }); 22 google.maps.event.addListener(marker, 'click', function(){ 23 if(!popup){ 24 popup = new google.maps.InfoWindow(); 25 } 26 var note = 'Wohoooo, sali el InfoWindow cuando puls el marcador, 27 en el lugar: ' + this.title 28 + ' y no se repiten las burbujas, ufff, ya estoy fatigado de 29 emocionarme...'; 30 popup.setContent(note); 31 popup.open(map, this); 32 }) 33 } 34 };
Ajustar automticamente la ventana para adaptarse a todos los marcadores

A veces sabemos cuantos marcadores va haber en el mapa, pero cuando empezamos a crear aplicaciones que toman valores automticos, es bueno dejar que la aplicacin se encargue de establecer los lmites. Con la clase google.maps.LatLngBounds es posible lograrlo. LatLngBounds establece los lmites en forma rectangular y se puede pasar dos argumentos (opcionales) que son las coordenadas suroccidental y nororiental expresadas con la clase google.maps.LatLng(). El primer argumento debe ser el marcador que se encuentre ms a la izquierda y el segundo el que est ms a la derecha. Luego con el mtodo fitBounds de la clase map reajustamos el mapa. ? 01 window.onload = function(){ 02 var popup; 03 var n=1; 04 var options = { 05 zoom: 3 06 , center: new google.maps.LatLng(18.2, -66.5) 07 , mapTypeId: google.maps.MapTypeId.ROADMAP 08 }; 09 var map = new google.maps.Map(document.getElementById('map'), 10 options); 11 var place = new Array(); 12 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); 13 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 14 marker = new google.maps.Marker({ 15 position: place['San Juan']
16 17 18 , map: map 19 , title: 'San Juan' 20 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png' 21 }); 22 var marker = new google.maps.Marker({ 23 position: place['Fajardo'] 24 , map: map 25 , title: 'Fajardo' 26 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' 27 }); 28 var limits = new google.maps.LatLngBounds( 29 place['San Juan'] 30 , place['Fajardo'] 31 ); 32 map.fitBounds(limits); 33 }; 34 35
Pero cmo podemos hacer que lo haga automtico? La clase LatLngBounds tiene un mtodo llamado extend que nos ayudar en lo que queremos hacer. Este toma un solo argumento y es google.maps.LatLng() del marcador en curso. Primero instanciamos la clase LatLngBounds fuera del bucle y dentro del bucle usamos el mtodo extend, al final, fuera del bucle, llamamos el mtodo fitBounds. ? 01 window.onload = function(){
02 03 var popup; 04 var n=1; 05 var options = { 06 zoom: 3 07 , center: new google.maps.LatLng(18.2, -66.5) 08 , mapTypeId: google.maps.MapTypeId.ROADMAP 09 }; 10 var map = new google.maps.Map(document.getElementById('map'), 11 options); 12 var limits = new google.maps.LatLngBounds(); 13 var place = new Array(); 14 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); 15 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 16 place['Culebras'] = new google.maps.LatLng(18.315, -65.3); 17 for(var i in place){ 18 var marker = new google.maps.Marker({ 19 position: place[i] 20 , map: map 21 , title: i 22 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/red/marker' + n++ + 23 '.png' 24 }); 25 limits.extend(place[i]); 26 } 27 map.fitBounds(limits); 28 }; 29
Personalizar el marcador con MarkerImage

google.maps.MarkerImage es una clase que contiene informacin acerca de la imagen y/o sombra a usar en el marcador. Tiene cinco argumentos, pero solo el primero es requisito. url: La direccin apuntando a la imagen size: El tamao de la imagen origin: La parte de la imagen a usar. Debe usarse con la clase google.maps.Point. Esto se usa mucho con la tcnica llamada sprites anchor: Establece la parte de la imagen que va a usar para apuntar la localizacin en el mapa. Si no se establece, toma como base la parte del medio-abajo scaledSize: Permite mostrar la imagen ms pequea o ms grande al tamao original. Si se usa esta propiedad se debe ajustar el anchor al tamao establecida de la imagen Se puede definir qu reas del marcador son clickeables usando shape en el objeto MarkerOptions. Si no se usa esta propiedad toda la imagen es clickeable. Esta propiedad tiene como valor un objeto literal con dos propiedades: type que define cual es la figura (rect, circ, poly) a usar y coord que establece las coordenadas a usar pero dependiendo el tipo de figura que se haya seleccionado. rect: requiere dos valores que son las esquinas de: arriba-izquierda, abajo-derecha circ: requiere de tres valores que son: x,y y el radio poly: consiste de varios puntos x,y en forma lineal y como los poligonos son figuras cerradas, el ltimo punto automaticamente se conecta con el primero Notas: Cuando no se requiera usar algn argumento opcional, solo debes aadir null hasta llegar al argumento deseado Es buena programacin indicar en los argumentos opcionales los valores, para que as el navegador no necesite hacer clculos innecesarios, como por ejemplo indicar el size Por qu no usar una imagen que contenga la sombra directamente? Para tener ms flexibilidad. Podriamos usar una imagen y darle brillo conforme al evento que est ocurriendo al momento, como por ejemplo hover. Veremos luego, como podemos cambiar la imagen conforme al evento que ocurra. Tambin podramos inhablitar la sombra para mostrar mejor algn detalle en el mapa Para inhabilitar la sombra del marcador, solo se tiene que declarar como valor true la propiedad flat en el objeto MarkerOptions de la clase google.maps.Marker. Por defecto tiene como valor false Hemos tomado el logo de este sitio web, lo cambiamos a forma vertical y lo convertimos a una imagen png con transparencia, luego visitamos http://www.powerhut.co.uk/googlemaps/custom_markers.php para obtener la sombra y el shape con sus coordenadas a usar en el marcador de una forma sencilla. Tambin crea la imagen usando la tcnica de sprites. En este ejemplo usaremos la tcnica de sprites: ? 01 window.onload = function(){ 02 var popup; 03 var n=1; 04 var options = { 05 zoom: 3 06 , center: new google.maps.LatLng(18.2, -66.5)
07 , mapTypeId: google.maps.MapTypeId.ROADMAP 08 }; 09 var map = new google.maps.Map(document.getElementById('map'), 10 options); 11 var limits = new google.maps.LatLngBounds(); 12 var place = new Array(); 13 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); 14 place['Fajardo'] = new google.maps.LatLng(18.336, -65.65); 15 place['Culebras'] = new google.maps.LatLng(18.315, -65.3); 16 place['Vieques'] = new google.maps.LatLng(18.125, -65.44); 17 place['Humacao'] = new google.maps.LatLng(18.14, -65.88); 18 var image = new google.maps.MarkerImage( 19 'http://www.maestrosdelweb.com/images/2011/04/sprite.png' 20 , new google.maps.Size(30,43) 21 , new google.maps.Point(0,0) 22 , new google.maps.Point(15,43) 23 ); 24 var shadow = new google.maps.MarkerImage( 25 'http://www.maestrosdelweb.com/images/2011/04/sprite.png' 26 , new google.maps.Size(56,43) 27 , new google.maps.Point(30,0) 28 , new google.maps.Point(15,43) 29 ); 30 var shape = { 31 coord: [ 32 2,0,3,1,5,2,7,3,8,4,10,5,11,6,29,7,29,8,29,9,29,10,29,11,29,12, 33 29,13,29,14,28,15,27,16,26,17,25,18,23,19,21,20,20,21,26,22,26, 34 23,26,24,26,25,26,26,26,27,25,28,24,29,23,30,21,31,20,32,18,33, 35 17,34,15,35,15,36,15,37,15,38,15,39,15,40,15,41,15,42,14,42,14, 36 41,13,40,12,39,10,38,8,37,7,36,6,35,5,34,4,33,4,32,4,31,4,30,4, 37 29,5,28,10,27,8,26,7,25,5,24,4,23,3,22,3,21,3,20,3,19,3,18,3,17, 38 3,16,11,15,9,14,8,13,6,12,4,11,3,10,2,9,1,8,0,7,0,6,0,5,0,4,0,3, 39 0,2,0,1,0,0,2,0 40 ] 41 , type: 'poly' 42 }; 43 for(var i in place){ var marker = new google.maps.Marker({ 44 position: place[i] 45 , map: map 46 , title: i 47 , icon: image 48 , shadow: shadow 49 , shape: shape 50 }); 51 limits.extend(place[i]); 52 } 53 map.fitBounds(limits); 54 }; 55
56 57 58 59 60 61
Cambiar imagen conforme a un evento

La clase google.maps.Marker tiene unos getters/setters que nos ayudar para poder modificar la imagen conforme al evento que ocurre. Solo necesitamos indicar el evento usando google.maps.event.addListener y en el tercer argumento indicamos que queremos modificar la imagen del objeto en uso, con el mtodo setIcon de la clase google.maps.Marker. ? 01 window.onload = function(){ 02 var popup; 03 var n=1; 04 var options = { 05 zoom: 3 06 , center: new google.maps.LatLng(18.2, -66.5) 07 , mapTypeId: google.maps.MapTypeId.ROADMAP 08 }; 09 var map = new google.maps.Map(document.getElementById('map'), 10 options); 11 var limits = new google.maps.LatLngBounds(); 12 var place = new Array(); 13 place['San Juan'] = new google.maps.LatLng(18.465, -66.105); place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
14 15 16 17 18 place['Culebras'] = new google.maps.LatLng(18.315, -65.3); 19 place['Vieques'] = new google.maps.LatLng(18.125, -65.44); 20 place['Humacao'] = new google.maps.LatLng(18.14, -65.88); 21 place['Ponce'] = new google.maps.LatLng(18.025, -66.615); 22 place['Mayagez'] = new google.maps.LatLng(18.215, -67.14); 23 for(var i in place){ 24 var marker = new google.maps.Marker({ 25 position: place[i] 26 , map: map 27 , title: i 28 , icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' 29 }); 30 google.maps.event.addListener(marker, 'mouseover', function(){ 31 this.setIcon('http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png'); 32 }); 33 google.maps.event.addListener(marker, 'mouseout', function(){ 34 this.setIcon('http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'); 35 }); 36 google.maps.event.addListener(marker, 'mousedown', function(){ 37 this.setIcon('http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png'); 38 }); 39 google.maps.event.addListener(marker, 'mouseup', function(){ 40 this.setIcon('http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png'); 41 }); 42 limits.extend(place[i]); 43 } 44 map.fitBounds(limits); 45 }; 46 47 48 49
Consejos prcticos para el InfoWindow en Google Maps

En la versin 2 de Google Maps, existen muchos mtodos para trabajar con el InfoWindow. Sin embargo, en la versin 3, han colocado solo lo esencial. Vamos a mostrar varios ejemplos y consejos para trabajar con el InfoWindow, algunos similares a los que se podan hacer con la versin 2.
rea de trabajo
Para empezar usaremos el mismo rea de trabajo que el captulo 1 (Google Maps API V3 introduccin y primeros pasos) y captulo 2 (Marcadores, posicionar una imagen en el mapa). Luego iremos modificndolo conforme a lo que vayamos trabajando. ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 06 <title>test</title> 07 <style> 08 *{ margin: 0; padding: 0; } 09 html, body, #map{ 10 width: 100%;
height: 100%; 11 } 12 </style> 13 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 14 sensor=false&language=es"></script> 15 <script type="text/javascript" src="js/map.js"></script> 16 </head> 17 <body> 18 <div id="map"></div> 19 </body> </html> Dentro del archivo map.js, es donde estaremos trabajando los ejemplos de javascript.
zIndex
Cuando se van creando los InfoWindow, el ltimo creado se muestra sobre el anterior. Por lo regular una forma de evitarlo, es usando la misma instancia del objeto creado y as solo se puede visualizar uno. Pero si deseamos mostrar varios a la misma vez, entonces cmo podemos hacer para seleccionar un InfoWindow y este se coloque encima de los anteriores? Conforme a la clase de InfoWindow podemos ver en el rea de eventos que solo estn disponibles: closeclick, content_changed, domready, position_changed y zindex_changed. En ningn momento se mencion el evento click y es el que necesitamos. Una solucin es que cuando se seleccione algn elemento dentro del InfoWindow, este se pueda colocar encima de todos los demas (luego ampliaremos como trabajar HTML y CSS en el InfoWindow): ? 01 window.onload = function(){ 02 var options = { 03 zoom: 14 04 , center: new google.maps.LatLng(18.470338, -66.123503) 05 , mapTypeId: google.maps.MapTypeId.ROADMAP 06 }; 07 var map = new google.maps.Map(document.getElementById('map'), 08 options); 09 var n=1; 10 var markers = [ 11 { 12 'position':new google.maps.LatLng(18.470338, -66.123503) 13 , 'info':'<div id="contentInfoWindow' + n++ + '" style="width: 14 300px; height: 300px; border: 1px solid #000;"></div>' 15 }, 16 { 17 'position':new google.maps.LatLng(18.464008, -66.117776) 18 , 'info':'<div id="contentInfoWindow' + n++ + '" style="width: 19 300px; height: 300px; border: 1px solid #000;"></div>' 20 }, 21 { 22 'position':new google.maps.LatLng(18.470826, -66.136205) , 'info':'<div id="contentInfoWindow' + n++ + '" style="width:
23 300px; height: 300px; border: 1px solid #000;"></div>' 24 } ]; 25 n=1; 26 for(var i in markers){ 27 marker = new google.maps.Marker({ 28 position: markers[i]['position'] 29 , map: map 30 }); 31 popup = new google.maps.InfoWindow({ 32 content: markers[i]['info'] 33 , zIndex: n 34 }); 35 popup.open(map, marker); 36 (function(id, popup){ 37 google.maps.event.addListener(popup, 'domready', function(){ 38 google.maps.event.addDomListener(document.getElementById('contentIn 39 foWindow' + id), 'click', function(){ 40 popup.setZIndex(n++); 41 }); 42 }) 43 })(n++, popup); 44 } 45 };
Si seleccionamos cualquier rea dentro del elemento <div> que est en el contenido del InfoWindow, podemos ver que la burbuja que seleccionemos se coloca encima de todos los mencionados. Esto lo logramos: Colocando primero en qu zIndex debe estar cuando se creen. Este paso es necesario para evitar sorpresas en el momento de seleccionar los elementos. Si no se coloca, el zIndex est indefinido y al seleccionar un elemento este se coloca por debajo de todos los elementos hasta que todos tengan definidos el zIndex Una forma de hacer referencia a un valor en especfico y no a la variable es encapsulando el valor. Esto lo hicimos creando una funcin annima (con dos argumentos) entre parntesis, luego colocamos otros partesis y dentro de estos, los valores a usar (conforme a los argumento declarados en la funcin) Como las peticiones son asincrnicas, debemos esperar que los elementos declarados en el InfoWindow se carguen por lo que debemos hacer uso del evento domready de la clase InfoWindow. Una vez cargados los elementos le indicamos que queremos usar el mtodo addDomListener y usar el evento click, de esta forma podemos seleccionar el elemento que deseamos Por ltimo modificamos el valor del zIndex del InfoWindow que seleccionamos, con el
mtodo setZIndex indicando el ltimo valor numrico que se encuentra en la variable n
HTML y CSS
Dentro del InfoWindow podemos colocar diferentes tipos de datos, por ejemplo HTML y modificarlo con CSS. Modificamos el archivo que contiene el rea de trabajo a que quede: ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 06 <title>test</title> 07 <style> 08 *{ margin: 0; padding: 0; } 09 html, body, #map{ 10 width: 100%; 11 height: 100%; 12 } 13 img{ border: 0; } 14 .contentMap{ 15 width: 630px; 16 border: 1px solid #336699; 17 max-height:415px; 18 overflow:auto; 19 } 20 .contentImg{ 21 float: left; 22 width: 300px; 23 margin-right: 10px; 24 text-align: center; 25 } 26 .contentImg a{ 27 color: #369; 28 font-size: 12px; 29 } 30 .contentTxt{ 31 float: left; 32 width: 300px; 33 } 34 .clear{ clear: both; } 35 </style> 36 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 37 sensor=false&language=es"></script> 38 <script type="text/javascript" src="js/map.js"></script> 39 </head> 40 <body> 41 <div id="map"></div> </body>
42 </html> En el archivo map.js colocamos: ? 01 window.onload = function(){ 02 var options = { 03 zoom: 14 04 , center: new google.maps.LatLng(18.470338, -66.123503) 05 , mapTypeId: google.maps.MapTypeId.ROADMAP 06 }; 07 var map = new google.maps.Map(document.getElementById('map'), 08 options); 09 var n=1; 10 var markers = [ 11 { 12 'position':new google.maps.LatLng(18.470338, -66.123503) 13 , 'info':'<div id="contentInfoWindow' + n++ + '" 14 class="contentMap">\ 15 <div class="contentImg">\ 16 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan.jpg" title="San 17 Juan Morro" />\ 18 Autor desconocido\ 19 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan2.jpg" title="San 20 Juan Morro" />\ 21 <a href="http://www.flickr.com/photos/19114667@N00/2134221308/">Tomada por 22 blucolt</a>\ 23 </div>\ 24 <div class="contentTxt">\ 25 <h2>San Juan Morro</h2>\ 26 <p>\ 27 En la cima del Antiguo San Juan, encontrars al Fuerte San Felipe 28 del Morro,\ 29 ms conocido como El Morro. Esta construccin perteneciente al 30 siglo XVI, fue\ 31 hecha para proteger a la ciudad de los ataques por mar, siendo uno 32 de los elementos\ 33 ms representativos de la antigua ciudad. Probablemente haya sido 34 el monumento ms\ 35 famoso en los tiempos de las colonias espaolas y ahora la 36 fortaleza sobresale en una\ 37 isleta rocosa.\ 38 </p>\ 39 </div>\ 40 <div class="clear"></div>\ 41 </div>' 42 }, 43 { 'position':new google.maps.LatLng(18.464008, -66.117776) 44 , 'info':'<div id="contentInfoWindow' + n++ + '" 45 class="contentMap">\
46 <div class="contentImg">\ 47 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan3.jpg" title="San 48 Juan Parque de las Palomas" />\ 49 <a href="http://www.flickr.com/photos/coltharp/2133445467/in/photostream/">Tomada por 50 blucolt</a>\ 51 <img src="http://www.maestrosdelweb.com/images/2011/04/Sanjuan4.jpg" title="San 52 Juan Parque de las Palomas" />\ 53 autor desconocido\ 54 </div>\ 55 <div class="contentTxt">\ 56 <h2>San Juan Parque de las Palomas</h2>\ 57 <p>\ 58 Sobre una de las murallas antiguas de la ciudad, con vista desde lo 59 alto hacia el\ 60 Paseo de la Princesa, es el lugar perfecto para disfrutar de una 61 vista espectacular\ 62 de la Baha de San Juan, de la ciudad y de las montaas.\ 63 </p>\ 64 </div>\ 65 <div class="clear"></div>\ 66 </div>' 67 }, 68 { 69 'position':new google.maps.LatLng(18.470826, -66.136205) 70 , 'info':'<div id="contentInfoWindow' + n++ + '" 71 class="contentMap">\ 72 <div class="contentImg">\ 73 <img src="http://www.maestrosdelweb.com/images/2011/04/ToaBaja.jpg" title="Toa 74 Baja Isla de Cabras" />\ 75 autor desconocido\ 76 <img src="http://www.maestrosdelweb.com/images/2011/04/ToaBaja2.jpg" title="Toa 77 Baja Isla de Cabras" />\ 78 <a href="http://www.flickr.com/photos/arturodonate/2825560234/">Tomada por 79 arturodonate</a>\ 80 </div>\ 81 <div class="contentTxt">\ 82 <h2>Toa Baja Isla de Cabras</h2>\ 83 <p>\ 84 Debido a su localizacin estratgica en la entrada de la baha de 85 San Juan, Isla de Cabras\ 86 provea un punto estratgico para un fuego cruzado en conjunto con 87 el Fuerte San Felipe del Morro\ 88 en el otro lado de la baha, para as prevenir que navos invasores 89 entraran.\ 90 </p>\ 91 </div>\ 92 <div class="clear"></div>\ 93 </div>' 94 }
]; n=1; for(var i in markers){ marker = new google.maps.Marker({ position: markers[i]['position'] , map: map , zIndex: n }); popup = new google.maps.InfoWindow({ content: markers[i]['info'] 95 , zIndex: n 96 }); 97 popup.open(map, marker); (function(id, popup){ google.maps.event.addListener(popup, 'domready', function(){ google.maps.event.addDomListener(document.getElementById('contentIn foWindow' + id), 'click', function(){ popup.setZIndex(n++); }); }) })(n++, popup); } };
Notas: Es buena programacin el separar los archivos, como por ejemplo el de CSS. Para este material estaremos trabajando el CSS y HTML junto, para facilitar la enseanza El tamao del InfoWindow es una combinacin del contenido, el estilo que le hayas dado y del tamao del mapa. Si el tamao del InfoWindow no cabe en el tamao establecido para el mapa, el API va a reducirlo para que se acomode
Aadir video de Youtube

Las etiquetas object tienden a sobre-ponerse a las dems. Una forma de evitarlo es llamar la etiqueta object una vez el InfoWindow est al frente de todos los dems. Modificamos primero el rea de trabajo para trabajar las etiquetas con CSS y aadimos el API de youtube: ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 06
<title>test</title> 07 <style> *{ margin: 0; padding: 0; } 08 html, body, #map{ 09 width: 100%; 10 height: 100%; 11 } 12 img{ border: 0; } 13 .contentMap{ 14 width: 630px; 15 border: 1px solid #336699; 16 max-height:415px; 17 overflow:auto; 18 } 19 .contentImg{ 20 float: left; 21 width: 300px; 22 margin-right: 10px; 23 text-align: center; 24 } 25 .contentImg a{ 26 color: #369; 27 font-size: 12px; 28 } 29 .contentTxt{ 30 float: left; 31 width: 300px; 32 } 33 .clear{ clear: both; } 34 .youtube{ cursor: pointer; } 35 </style> 36 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 37 sensor=false&language=es"></script> 38 <script type="text/javascript" 39 src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> 40 <script type="text/javascript" src="js/map.js"></script> 41 </head> 42 <body> 43 <div id="map"></div> 44 </body> </html> Luego modificamos el archivo map.js: ? 001 window.onload = function(){ 002 var options = { 003 zoom: 14 004 , center: new google.maps.LatLng(18.470338, -66.123503) 005 , mapTypeId: google.maps.MapTypeId.ROADMAP 006 };
007 var map = new google.maps.Map(document.getElementById('map'), 008 options); 009 var n=1; 010 var markers = [ 011 { 012 'position':new google.maps.LatLng(18.470338, -66.123503) 013 , 'info':'<div id="contentInfoWindow' + n + '" class="contentMap">\ 014 <div class="contentImg">\ 015 <a id="zoom' + n + '" href="#">Zoom</a>\ 016 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan.jpg" title="San 017 Juan Morro" />\ 018 Autor desconocido\ 019 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan2.jpg" title="San 020 Juan Morro" />\ 021 <a href="http://www.flickr.com/photos/19114667@N00/2134221308/">Tomada por 022 blucolt</a>\ 023 </div>\ 024 <div class="contentTxt">\ 025 <h2>San Juan Morro</h2>\ 026 <p>\ 027 En la cima del Antiguo San Juan, encontrars al Fuerte San Felipe 028 del Morro,\ 029 ms conocido como El Morro. Esta construccin perteneciente al 030 siglo XVI, fue\ 031 hecha para proteger a la ciudad de los ataques por mar, siendo uno 032 de los elementos\ 033 ms representativos de la antigua ciudad. Probablemente haya sido 034 el monumento ms\ 035 famoso en los tiempos de las colonias espaolas y ahora la 036 fortaleza sobresale en una\ 037 isleta rocosa.\ 038 </p>\ 039 <div id="youtube' + n++ + '" class="youtube"></div>\ 040 </div>\ 041 <div class="clear"></div>\ 042 </div>' 043 , 'youtube':'xKiaeLhBhvk' 044 } 045 , { 046 'position':new google.maps.LatLng(18.464008, -66.117776) 047 , 'info':'<div id="contentInfoWindow' + n + '" class="contentMap">\ 048 <div class="contentImg">\ 049 <a id="zoom' + n + '" href="#">Zoom</a>\ 050 <img src="http://www.maestrosdelweb.com/images/2011/04/SanJuan3.jpg" title="San 051 Juan Parque de las Palomas" />\ 052 <a href="http://www.flickr.com/photos/coltharp/2133445467/in/photostream/">Tomada por 053 blucolt</a>\ 054 <img src="http://www.maestrosdelweb.com/images/2011/04/Sanjuan4.jpg" title="San 055 Juan Parque de las Palomas" />\
056 autor desconocido\ 057 </div>\ 058 <div class="contentTxt">\ 059 <h2>San Juan Parque de las Palomas</h2>\ 060 <p>\ 061 Sobre una de las murallas antiguas de la ciudad, con vista desde 062 lo alto hacia el\ 063 Paseo de la Princesa, es el lugar perfecto para disfrutar de una 064 vista espectacular\ 065 de la Baha de San Juan, de la ciudad y de las montaas.\ 066 </p>\ 067 <div id="youtube' + n++ + '" class="youtube"></div>\ 068 </div>\ 069 <div class="clear"></div>\ 070 </div>' 071 , 'youtube':'7NvCsS1Kt_s' 072 } 073 , { 074 'position':new google.maps.LatLng(18.470826, -66.136205) 075 , 'info':'<div id="contentInfoWindow' + n + '" class="contentMap">\ 076 <div class="contentImg">\ 077 <a id="zoom' + n + '" href="#">Zoom</a>\ 078 <img src="http://www.maestrosdelweb.com/images/2011/04/ToaBaja.jpg" title="Toa 079 Baja Isla de Cabras" />\ 080 autor desconocido\ 081 <img src="http://www.maestrosdelweb.com/images/2011/04/ToaBaja2.jpg" title="Toa 082 Baja Isla de Cabras" />\ 083 <a href="http://www.flickr.com/photos/arturodonate/2825560234/">Tomada por 084 arturodonate</a>\ 085 </div>\ 086 <div class="contentTxt">\ 087 <h2>Toa Baja Isla de Cabras</h2>\ 088 <p>\ 089 Debido a su localizacin estratgica en la entrada de la baha de 090 San Juan, Isla de Cabras\ 091 provea un punto estratgico para un fuego cruzado en conjunto con 092 el Fuerte San Felipe del Morro\ 093 en el otro lado de la baha, para as prevenir que navos 094 invasores entraran.\ 095 </p>\ 096 <div id="youtube' + n++ + '" class="youtube"></div>\ 097 </div>\ 098 <div class="clear"></div>\ </div>' 099 , 'youtube':'PZpF3FShJyc' 100 } 101 ]; 102 n=1; 103 var currentId; 104
105 for(var i in markers){ 106 marker = new google.maps.Marker({ 107 position: markers[i]['position'] 108 , map: map 109 , zIndex: n 110 }); 111 popup = new google.maps.InfoWindow({ 112 content: markers[i]['info'] 113 , zIndex: n 114 }); 115 popup.open(map, marker); 116 (function(id, marker, popup, video){ 117 google.maps.event.addListener(popup, 'domready', function(){ 118 var a = document.getElementById('zoom' + id); 119 a.onclick = function(){ 120 map.setMapTypeId(google.maps.MapTypeId.SATELLITE); 121 map.setCenter(marker.getPosition()); 122 map.setZoom(16); 123 return false; 124 } 125 var youtube = getImage(video, id); 126 google.maps.event.addDomListener(youtube, 'click', function(){ 127 var object = document.createElement('object'); 128 object.id = 'player' + id; 129 this.innerHTML = ''; this.appendChild(object); 130 // mtodo de youtube 131 swfobject.embedSWF( 132 133 'http://www.youtube.com/v/' + video + '? 134 f=user_uploads&app=youtube_gdata&rel=1&border=0&fs=1&autoplay=1', 135 ('player' + id), '300', '255', '9.0.0', false, false, {allowfullscreen: 'true'}); 136 }); 137 google.maps.event.addDomListener(document.getElementById('contentI 138 nfoWindow' + id), 'click', function(){ 139 if(id != currentId){ 140 popup.setZIndex(n++); 141 currentId = id; 142 } 143 }); 144 google.maps.event.addListener(popup, 'zindex_changed', function(){ 145 for(var ii in markers){ 146 if(currentId == (parseInt(ii) + 1)){ 147 getImage(markers[ii]['youtube'], (parseInt(ii) + 1)); 148 } 149 } 150 }); 151 currentId = id; 152 }); 153
})(n++, marker, popup, markers[i]['youtube']); } }; function getImage(video, id){ var img = document.createElement('img'); 154 img.src = 'http://img.youtube.com/vi/' + video + '/0.jpg'; 155 img.width = '300'; 156 img.height = '255'; 157 var youtube = document.getElementById('youtube' + id); youtube.innerHTML = ''; youtube.appendChild(img); return youtube; }
Qu es lo que hace? Si pulsamos en la imagen de la derecha de cada InfoWindow se ejecuta el evento click del addDomListener que mira la etiqueta <div> que contiene el id youtube{n}, donde {n} puede ser uno de los tres elementos creados que tiene el contenido de youtube. Se crea la etiqueta object, se aade el video correspondiente y luego se aade la etiqueta object a la etiqueta que tiene el id youtube{n}. Si queremos ver otra burbuja, seleccionamos la que deseamos y se ejecutan dos eventos, el que contiene el id contentInfoWindow{n}, este tiene todo el contenido del InfoWindow y el evento zindex_changed que verifica si hubo algn cambio en el zIndex del InfoWindow. Este ltimo vuelve a colocar las imagenes en el elemento <div> con el id youtube{n} en aquel InfoWindow
que no se encuentre alfrente. Tambin se aadi un enlace llamado Zoom. Lo que hace es cambiar el tipo de mapa, acercarlo ms y centrar el mapa al marcador.
Aadir mapa
Podemos crear un mapa, en el InfoWindow, mostrndolo con ms detalle. Modificamos el rea de trabajo: ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 01 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 03 <html xmlns="http://www.w3.org/1999/xhtml"> <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 05 <title>test</title> 06 <style> 07 *{ margin: 0; padding: 0; } 08 html, body, #map{ 09 width: 100%; 10 height: 100%; 11 } 12 .contentMap{ 13 width: 400px; 14 height: 400px; 15 border: 1px solid #336699; 16 } 17 </style> 18 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 19 sensor=false&language=es"></script> 20 <script type="text/javascript" src="js/map.js"></script> 21 </head> 22 <body> 23 <div id="map"></div> 24 </body> 25 </html> El map.js lo modificamos as: ? 01 window.onload = function(){ 02 var options = { 03 zoom: 14 04 , center: new google.maps.LatLng(18.470338, -66.123503) 05 , mapTypeId: google.maps.MapTypeId.ROADMAP 06 }; 07 var map = new google.maps.Map(document.getElementById('map'), 08 options); 09 var n=1; 10 var markers = [
11 { 12 'position':new google.maps.LatLng(18.470338, -66.123503) 13 , 'info':'<div id="contentInfoWindow' + n++ + '" 14 class="contentMap"></div>' 15 }, 16 { 17 'position':new google.maps.LatLng(18.464008, -66.117776) 18 , 'info':'<div id="contentInfoWindow' + n++ + '" 19 class="contentMap"></div>' 20 }, 21 { 22 'position':new google.maps.LatLng(18.470826, -66.136205) 23 , 'info':'<div id="contentInfoWindow' + n++ + '" 24 class="contentMap"></div>' 25 } 26 ]; 27 n=1; 28 for(var i in markers){ 29 marker = new google.maps.Marker({ 30 position: markers[i]['position'] 31 , map: map 32 }); 33 popup = new google.maps.InfoWindow({ 34 content: markers[i]['info'] 35 , zIndex: n }); 36 popup.open(map, marker); 37 (function(id, popup, marker){ 38 google.maps.event.addListener(popup, 'domready', function(){ 39 var div = document.createElement('div'); 40 div.style.width = '100%'; 41 div.style.height = '100%'; 42 var root = document.getElementById('contentInfoWindow' + id); 43 root.appendChild(div); 44 var divOptions = { 45 zoom: 17 46 , center: marker.getPosition() 47 , mapTypeId: google.maps.MapTypeId.HYBRID 48 , disableDefaultUI: true 49 , draggable: false 50 }; 51 var divMap = new google.maps.Map(div, divOptions); 52 var divMarker = new google.maps.Marker({ 53 position: marker.getPosition() 54 , map: divMap 55 , clickable: false 56 }); 57 google.maps.event.addDomListener(root, 'click', function(){ 58 popup.setZIndex(n++); 59
60 61 }); 62 }) 63 })(n++, popup, marker); 64 } 65 }; 66
Polilneas y Polgonos en Google Map

Las Polilneas y los Polgonos son unas herramientas muy tiles para mostrar carreteras, bordes y otro tipo de informacin.
rea de trabajo
Continuaremos con el rea de trabajo que hemos usado a travs de los captulos: Captulo uno: Google Maps API V3 introduccin y primeros pasos Captulo dos: Marcadores, posicionar una imagen en el mapa Captulo tres: Consejos prcticos para el InfoWindow en Google Maps ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 06 <title>test</title> 07 <style> 08 *{ margin: 0; padding: 0; } 09 html, body, #map{ 10 width: 100%; 11 height: 100%; 12 } 13 </style> 14 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 15 sensor=false&language=es"></script> 16 <script type="text/javascript" src="js/map.js"></script> 17 </head> 18 <body> 19 <div id="map"></div>
</body> </html>
Polilneas
Consiste de una serie de segmentos conectados por vrtices (lnea recta creada por dos puntos) que forman un nico objeto. Para poder crear una polilnea se requiere usar la clase google.maps.Polyline. Requiere de dos argumentos dentro del objeto google.maps.PolylineOptions, path y map. path: requiere de varios puntos que indican la latitud y longitud usando la clase google.maps.LatLng map: el mapa donde se va a mostrar la polilnea, usando la clase google.maps.Map ? 01 02 window.onload = function(){ 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 , draggableCursor: 'default' 08 , draggingCursor: 'default' 09 }; 10 var map = new google.maps.Map(document.getElementById('map'), 11 options); 12 var routes = [ 13 new google.maps.LatLng(17.997671, -66.615356) 14 , new google.maps.LatLng(18.459418, -66.060646) 15 ]; 16 var polyline = new google.maps.Polyline({ 17 path: routes 18 , map: map 19 , strokeColor: '#ff0000' 20 , strokeWeight: 5 21 , strokeOpacity: 0.3 22 , clickable: false 23 }); 24 }; 25 Nota: Para poder quitar las lneas del mapa, se puede lograr usando el mtodo de setMap y como valor null. El array que se us para mostrar la ruta, google maps lo convierte a un MVCArray cuando lo indico en el path del PolylineOptions. MVCArray es un objeto que tiene otros objetos. La diferencia entre un MVCArray a un array regular es que si creas los puntos usando MVCArray, luego puedes aadir otro punto, insertndolo en el MVCArray y el mapa lo reconoce automticamente, mientras que un array regular tienes que indicarle al mapa el nuevo punto e insertarlo en el path del PolylineOptions. ? 01 window.onload = function(){
02 03 04 var options = { 05 zoom: 9 , center: new google.maps.LatLng(18.2, -66.5) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 , draggableCursor: 'default' 08 , draggingCursor: 'default' 09 }; 10 var map = new google.maps.Map(document.getElementById('map'), 11 options); 12 var routes = new google.maps.MVCArray(); 13 var polyline = new google.maps.Polyline({ 14 path: routes 15 , map: map 16 , strokeColor: '#ff0000' 17 , strokeWeight: 3 18 , strokeOpacity: 0.4 19 , clickable: false 20 }); 21 google.maps.event.addListener(map, 'click', function(e){ 22 var path = polyline.getPath(); 23 path.push(e.latLng); 24 }); 25 }; 26 27 Nota: Como indicamos en la definicin, una polilnea consiste de una serie de segmentos conectados por vertices que esto representa dos puntos que hacen una lnea, por lo que la lnea aparecer luego que marquemos el segundo punto. Para poder crear mltiples polilneas, se necesita crear diferentes clases de google.maps.Polyline. ? 01 /** 02 * Sugerencias y correcciones por Jonathan (zerokilled) 03 * http://www.forosdelweb.com/miembros/zerokilled/ 04 */ 05 window.onload = function(){ 06 var hexVal = "0123456789ABCDEF".split(""); 07 var defaultColor = '#f00'; 08 var options = { 09 zoom: 9 10 , center: new google.maps.LatLng(18.2, -66.5) 11 , mapTypeId: google.maps.MapTypeId.ROADMAP 12 , draggableCursor: 'default' 13 , draggingCursor: 'default' 14 }; 15 var map = new google.maps.Map(document.getElementById('map'), 16 options);
17 18 19 20 var polyline = new google.maps.Polyline({ 21 path: new google.maps.MVCArray() 22 , map: map 23 , strokeColor: defaultColor 24 , strokeWeight: 3 25 , strokeOpacity: 0.5 26 }); 27 function makeColor(){ 28 /** 29 * Otra forma de crear un color aleatoriamente: 30 * 31 * for(var color = Math.floor(Math.random()*0xffffff).toString(16); color.length < 6; color = '0'+color); 32 * return '#' + color; 33 */ 34 return '#' + hexVal.sort(function(){ 35 return (Math.round(Math.random())-0.5); 36 }).slice(0,6).join(''); 37 } 38 polyline.currentColor = makeColor(); 39 google.maps.event.addListener(polyline, 'click', function(e){ 40 polyline.setOptions({strokeColor: polyline.currentColor}); 41 polyline = this, this.setOptions({strokeColor: defaultColor}); 42 }); 43 google.maps.event.addListener(map, 'rightclick', function(){ 44 polyline.setOptions({strokeColor: polyline.currentColor}); 45 polyline = new google.maps.Polyline({ 46 path: new google.maps.MVCArray() 47 , map: map 48 , strokeColor: defaultColor 49 , strokeWeight: 3 50 , strokeOpacity: 0.5 51 }); 52 polyline.currentColor = makeColor(); 53 google.maps.event.addListener(polyline, 'click', function(){ 54 polyline.setOptions({strokeColor: polyline.currentColor}); 55 polyline = this, this.setOptions({strokeColor: defaultColor}); 56 }); 57 }); 58 google.maps.event.addListener(map, 'click', function(e){ 59 polyline.getPath().push(e.latLng); 60 }); 61 }; 62 63 64 Empezamos pulsando en el mapa para crear una polilnea, luego del segundo punto es que se muestra en
el mapa la lnea. Para crear una nueva polilnea pulsamos el botn de la derecha del ratn en cualquier parte del mapa, el evento rightclick del addListener se ejecuta y aade una nueva clase google.maps.Polyline. Ahora podemos trazar una nueva polilinea, con diferente color. Si queremos volver a aadir ms puntos a alguna polilnea ya mencionada, la podemos seleccionar y seguir trabajando donde se qued el ltimo punto que hayamos indicado.
Polgonos
Los polgonos son objetos cerrados. Con la clase google.maps.Polygon se crean los polgonos. Requiere de dos argumentos dentro del objeto google.maps.PolygonOptions, path y map. path: requiere de varios puntos que indican la latitud y longitud usando la clase google.maps.LatLng map: el mapa donde se va a mostrar el polgono, usando la clase google.maps.Map Modificamos un poco el cdigo de polilneas y podemos crear mltiples polgonos de la misma forma como lo hicimos con las polilneas ? 01 /** 02 * Sugerencias y correcciones por Jonathan (zerokilled) 03 * http://www.forosdelweb.com/miembros/zerokilled/ 04 */ 05 window.onload = function(){ 06 var hexVal = "0123456789ABCDEF".split(""); 07 var defaultColor = '#ff0000'; 08 var options = { 09 zoom: 9 10 , center: new google.maps.LatLng(18.2, -66.5) 11 , mapTypeId: google.maps.MapTypeId.ROADMAP 12 , draggableCursor: 'default' 13 , draggingCursor: 'default' 14 }; 15 var map = new google.maps.Map(document.getElementById('map'), 16 options); 17 var polygon = new google.maps.Polygon({ 18 path: new google.maps.MVCArray() 19 , map: map 20 , strokeColor: defaultColor 21 , strokeWeight: 3 22 , strokeOpacity: 0.5 23 , fillColor: defaultColor 24 , fillOpacity: 0.3 25 , clickable: false 26 }); 27 function makeColor(){ 28 /** 29 * Otra forma de crear un color aleatoriamente: 30 * 31 * for(var color = Math.floor(Math.random()*0xffffff).toString(16);
32 color.length < 6; color = '0'+color); 33 * return '#' + color; 34 */ 35 return '#' + hexVal.sort(function(){ 36 return (Math.round(Math.random())-0.5); 37 }).slice(0,6).join(''); 38 } 39 polygon.currentColor = makeColor(); 40 google.maps.event.addListener(polygon, 'click', function(e){ 41 polygon.setOptions({ 42 strokeColor: polygon.currentColor 43 , fillColor: polygon.currentColor 44 , clickable: true 45 }); 46 polygon = this, this.setOptions({ 47 strokeColor: defaultColor 48 , fillColor: defaultColor 49 , clickable: false 50 }); 51 }); 52 google.maps.event.addListener(map, 'rightclick', function(){ 53 polygon.setOptions({ 54 strokeColor: polygon.currentColor 55 , fillColor: polygon.currentColor 56 , clickable: true }); 57 polygon = new google.maps.Polygon({ 58 path: new google.maps.MVCArray() 59 , map: map 60 , strokeColor: defaultColor 61 , strokeWeight: 3 62 , strokeOpacity: 0.5 63 , fillColor: defaultColor 64 , fillOpacity: 0.3 65 , clickable: false 66 }); 67 polygon.currentColor = makeColor(); 68 google.maps.event.addListener(polygon, 'click', function(){ 69 polygon.setOptions({ 70 strokeColor: polygon.currentColor 71 , fillColor: polygon.currentColor 72 , clickable: true 73 }); 74 polygon = this, this.setOptions({ 75 strokeColor: defaultColor 76 , fillColor: defaultColor 77 , clickable: false 78 }); 79 }); 80
81 82 83 }); 84 google.maps.event.addListener(map, 'click', function(e){ 85 polygon.getPath().push(e.latLng); 86 }); 87 }; 88 89 90 A diferencia de polilneas, necesitamos indicar que cuando est seleccionado el polgono no sea clickeable y as poder marcar la lnea dentro del polgono si fuera necesario.
Libreras y manejo masivos de marcadores

Un problema comn para los desarrolladores es la necesidad de trabajar con grandes nmeros de marcadores, se puede dificultar el navegar con muchos marcadores porque se vuelve lento el navegador y tambin visualizar los datos del mapa. Lo primero que debemos preguntarnos es cuntos marcadores se consideran muchos? Eso depender de varios factores, entre ellos: Rendimiento: mientras ms marcadores aadas ms lento se vuelve el mapa. Indicar a cual nmero de marcador se vuelve lento el mapa es difcil de decir. Todo va a depender de qu navegador se use Usabilidad: mientras ms marcadores aadas ms difcil puede ser para el usuario encontrar el punto que desea Por lo general con menos de 100 marcadores no debe haber problemas (siempre y cuando los marcadores estn distribuidos a travs del mapa y se pueda visualizar corrctamente), cuando hay ms de 100 se debe cuestionar: Es el mapa lento? Es difcil de visualizar? Es difcil de verificar la data en el mapa? Si respondes que s a una de esas preguntas, entonces piensa como mejorar el rendimiento o la forma de como se debe visualizar la data.
Manejando los marcadores

Una forma de trabajar los marcadores es filtrndolos, crear un men y que tenga solo seleccionado algunos por defecto y que el usuario luego escoja aquellos que desee visualizar. index.html ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 04 <title>test</title> 05 <style> 06 *{ margin: 0; padding: 0; } 07 html, body, #map{ 08 width: 100%; 09 height: 100%; } 10 #menu{ 11 width: 200px; 12 margin: 0 auto; 13 background-color: #fff; 14 border: 1px solid #333; 15 position: relative; 16 top: -50px; 17 text-align: center; 18 padding: 5px; 19 } 20 </style> 21 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 22 sensor=false&language=es"></script> 23 <script type="text/javascript" src="js/map.js"></script> 24 </head> 25 <body> 26 <div id="map"></div> 27 <div id="menu"> 28 <form action="index.html" method="get"> 29 <input type="checkbox" id="foo" name="fooBarBaz" /> <label 30 for="foo">Foo</label> 31 <input type="checkbox" id="bar" name="fooBarBaz" /> <label 32 for="bar">Bar</label> 33 <input type="checkbox" id="baz" name="fooBarBaz" /> <label 34 for="baz">Baz</label> 35 </form> 36 </div> </body> </html> map.js ? 01 /** 02 * Listener para el formulario 03 */ 04 function addListener(element, type, expression, bubbling) 05 { 06 bubbling = bubbling || false; if(element.addEventListener) { // Standard
07 element.addEventListener(type, expression, bubbling); 08 return true; 09 }else if(element.attachEvent) { // IE 10 element.attachEvent('on' + type, expression); 11 return true; 12 }else return false; 13 } 14 window.onload = function(){ 15 var fooArr = [], barArr = [], bazArr = []; 16 var options = { 17 zoom: 9 18 , center: new google.maps.LatLng(18.2, -66.3) 19 , mapTypeId: google.maps.MapTypeId.ROADMAP 20 }; 21 var map = new google.maps.Map(document.getElementById('map'), 22 options); 23 var southWest = new google.maps.LatLng(17.85, -67.35); 24 var northEast = new google.maps.LatLng(18.55, -65.2); 25 var lngSpan = northEast.lng() - southWest.lng(); 26 var latSpan = northEast.lat() - southWest.lat(); 27 for(var i=1; i<=1000; i++){ 28 var lat = southWest.lat() + latSpan * Math.random(); 29 var lng = southWest.lng() + lngSpan * Math.random(); 30 var latlng = new google.maps.LatLng(lat, lng); 31 var marker = new google.maps.Marker({ position: latlng 32 }); 33 if((i%3) == 0){ bazArr.push(marker); } 34 else if((i%2) == 0){ barArr.push(marker); } 35 else{ fooArr.push(marker); } 36 } 37 document.getElementById('foo').checked = true; 38 for(var i in fooArr){ 39 fooArr[i].setMap(map); 40 } 41 addListener(document.getElementById('foo'), 'click', function(){ 42 if(this.checked){ 43 for(var i in fooArr){ 44 fooArr[i].setMap(map); 45 } 46 }else{ 47 for(var i in fooArr){ 48 fooArr[i].setMap(null); 49 } 50 } 51 }); 52 addListener(document.getElementById('bar'), 'click', function(){ 53 if(this.checked){ 54 for(var i in barArr){ 55
56 57 58 59 60 barArr[i].setMap(map); 61 } 62 }else{ 63 for(var i in barArr){ 64 barArr[i].setMap(null); 65 } 66 } 67 }); 68 addListener(document.getElementById('baz'), 'click', function(){ 69 if(this.checked){ 70 for(var i in bazArr){ 71 bazArr[i].setMap(map); 72 } 73 }else{ 74 for(var i in bazArr){ 75 bazArr[i].setMap(null); 76 } 77 } 78 }); 79 }; 80 81 82 83
Libreras
Google maps tiene libreras adicionales para trabajar con el mapa. Todas las libreras adicionales las podemos ver en Libraries y las mencionadas en este captulo son MarkerClusterer y MarkerManager. Nota: Podemos usar las libreras desde la direccin web, pero lo aconsajable es que descarguen el archivo (o copien y peguen el cdigo en un archivo js), para evitar que si hacen una actualizacin al cdigo, no se afecte lo que han trabajado. Tambin es aconsejable trabajar con la compilacin. Para propsitos de enseanza lo trabajaremos indicando la direccin web oficial directamente.
MarkerClusterer
MarkerCulterer agrupa los marcadores y muestra la cantidad de marcadores que hay en cierto segmento. En la documentacin en el directorio llamado examples, muestra varios ejemplos de como utilizar esta librera. Para usarla se puede bajar el archivo markerclusterer.js, markerclusterer_compiled.js o colocar en el src de script directamente la direccin de la librera. index.html ? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> 03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 04 <title>test</title> 05 <style> 06 *{ margin: 0; padding: 0; } 07 html, body, #map{ 08 width: 100%; 09 height: 100%; 10 } 11 </style> 12 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 13 sensor=false&language=es"></script> 14 <script type="text/javascript" src="http://google-maps-utility-library15 16 v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> 17 <script type="text/javascript" src="js/map.js"></script> </head> 18 <body> 19 <div id="map"></div> 20 </body> </html> map.js ? 01 window.onload = function(){ 02 var markers = []; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.3) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var southWest = new google.maps.LatLng(17.85, -67.35); 11 var northEast = new google.maps.LatLng(18.55, -65.2); 12 var lngSpan = northEast.lng() - southWest.lng(); 13 var latSpan = northEast.lat() - southWest.lat(); 14 for(var i=1; i<=5000; i++){ 15 var lat = southWest.lat() + latSpan * Math.random(); 16 var lng = southWest.lng() + lngSpan * Math.random(); 17 var latlng = new google.maps.LatLng(lat, lng); 18 var marker = new google.maps.Marker({ 19 position: latlng 20 }); 21 markers.push(marker); 22 } 23 var markerclusterer = new MarkerClusterer(map, markers); 24 }; 25
26 27 Estos son los posibles colores que se pueden mostrar en el mapa que viene por defecto: Azul 2-9 Amarillo 10-99 Rojo 100-999 Violeta 1,000-9,999 Violeta oscuro 10,000+ El comportamiento que trae por defecto la clase MarkerClusterer se puede modificar en el tercer parametro. Las posibles opciones son: gridSize: Nmero entero. Valor por defecto 60 maxZoom: Nmero entero entre el 1 al 23. Indica hasta donde debe hacer el agrupamiento zoomOnClick: Valor booleano para hacer zoom al pulsar en el marcador. true o false. Valor por defecto true averageCenter: Centrar aproximdamente el marcador. true o false. Valor por defecto true minimumClusterSize: Nmero mnimo para agrupar los marcadores. Por defecto 2 styles: Es un array que contiene uno o varios objetos de MarkerStyleOptions. Posibles valores son: url: La direccin de la imagen a mostrar height: El alto de la imagen width: El ancho de la imagen anchor: Array con la posicin x y y de los nmeros en la imagen. Por defecto centrado textColor: Color de los nmeros. Por defecto black textSize: Tamao de los nmeros. Por defecto 11 backgroundPosition: Posicin del fondo Es importante el orden en que se indican los objetos en el tercer parametro de la clase MarkerClusterer, las imgenes se van a mostrar conforme al orden de los valores numricos indicados en los colores por defecto. Tambin los nmeros de imgenes a colocar son importante, ya que si se coloca uno, esa es la imagen a mostrar en cada uno de los niveles indicados en los colores, si son dos la primera representa el primer valor numrico y la segunda del segundo al quinto, si se colocan tres, la primera representa el primer valor numrico, la segunda el segundo y la tercera del tercero al quinto y as sucesivamente. map.js ? 01 window.onload = function(){ 02 var markers = []; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.3) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 };
08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var southWest = new google.maps.LatLng(17.85, -67.35); 11 var northEast = new google.maps.LatLng(18.55, -65.2); 12 var lngSpan = northEast.lng() - southWest.lng(); 13 var latSpan = northEast.lat() - southWest.lat(); 14 for(var i=1; i<=1000; i++){ 15 var lat = southWest.lat() + latSpan * Math.random(); 16 var lng = southWest.lng() + lngSpan * Math.random(); 17 var latlng = new google.maps.LatLng(lat, lng); 18 var marker = new google.maps.Marker({ 19 position: latlng 20 }); 21 markers.push(marker); 22 } 23 var markerclusterer = new MarkerClusterer(map, markers, { 24 gridSize: 60 25 , maxZoom: 11 26 , zoomOnClick: false 27 , minimumClusterSize: 4 28 , averageCenter: true 29 , styles: [{ 30 url: "http://google-maps-utility-library31 v3.googlecode.com/svn/trunk/markerclusterer/images/people35.png" 32 , height: 35 33 , width: 35 34 , textColor: 'white' 35 , textSize: 12 36 , anchor: [1,1] 37 },{ 38 url: "http://google-maps-utility-library39 v3.googlecode.com/svn/trunk/markerclusterer/images/people45.png" 40 , height: 45 41 , width: 45 42 , textColor: 'white' 43 , textSize: 14 44 , anchor: [1,30] 45 },{ 46 url: "http://google-maps-utility-library47 v3.googlecode.com/svn/trunk/markerclusterer/images/people55.png" 48 , height: 55 49 , width: 55 50 , textColor: 'white' 51 , textSize: 16 52 , anchor: [40,40] 53 }] 54 }); 55 };
MarkerManager
MarkerManager es bien similar a MarkerClusterer en que puede agrupar varios marcadores, pero su trabajo principal es mostrar solo aquellos marcadores en el viewport corriente. Al mover el mapa se van mostrando los puntos de acuerdo al viewport que se encuentra el usuario. Tambin se puede indicar desde cul nivel de zoom deseamos mostrar los marcadores. Cuando el usuario acerque o aleje el mapa, MarkerManager mostrar aquel o aquellos marcadores indicados en ese zoom. index.html ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 01 <html xmlns="http://www.w3.org/1999/xhtml"> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 04 <title>test</title> 05 <style> 06 *{ margin: 0; padding: 0; } 07 html, body, #map{ 08 width: 100%; 09 height: 100%; 10 } 11 </style> 12 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 13 sensor=false&language=es"></script> 14 <script type="text/javascript" src="http://google-maps-utility-library15 16 v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager_packed.js"></script> 17 <script type="text/javascript" src="js/map.js"></script> 18 </head> 19 <body> <div id="map"></div> 20 </body> </html> map.js ? 01 window.onload = function(){ 02 var markers = []; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.3) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var markerManager = new MarkerManager(map); 11 var southWest = new google.maps.LatLng(17.85, -67.35); 12 var northEast = new google.maps.LatLng(18.55, -65.2); 13 var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat();
14 15 16 for(var i=1; i<=1000; i++){ 17 var lat = southWest.lat() + latSpan * Math.random(); 18 var lng = southWest.lng() + lngSpan * Math.random(); 19 var latlng = new google.maps.LatLng(lat, lng); 20 var marker = new google.maps.Marker({ 21 position: latlng 22 }); 23 markers.push(marker); 24 } 25 google.maps.event.addListener(markerManager, 'loaded', function() { 26 markerManager.addMarkers(markers, 8, 10); 27 markerManager.refresh(); 28 }); 29 }; 30 31 En la clase MarkerManager tambin se puede modificar algunos de sus comportamientos, en el segundo parametro. Las posibles opciones son: maxZoom: Nmero entero entre el 1 al 23. Indica hasta donde debe trabajar MarkerManager borderPadding: MarkerManager muestra solo aquellos que estn en el viewport, pero tiene una zona adicional al viewport para mostrar marcadores adicionales. La razn es que cuando se mueva el mapa a cortas distancias ya tenga recargado tambin algunos marcadores. Por defecto esta zona de buffer es de 100 trackMarkers: true o false. Si cambiamos la posicin de un marcador despus que lo hayas aadido al MarkerManager se van a reflejar dos simultaneamente. Al colocar esta opcin como valor true le indicamos al MarkerManager que recargue de nuevo los marcadores y as se ve reflejado una sola vez el marcador que se haya modificado. Esto representa que el cdigo corra ms lento, as que si no se modificara la posicin de los marcadores se aconseja dejarlo como viene por defecto con valor false map.js ? 01 window.onload = function(){ 02 var markers = []; 03 var options = { 04 zoom: 9 05 , center: new google.maps.LatLng(18.2, -66.3) 06 , mapTypeId: google.maps.MapTypeId.ROADMAP 07 }; 08 var map = new google.maps.Map(document.getElementById('map'), 09 options); 10 var markerManager = new MarkerManager(map, { 11 maxZoom: 10 12 , borderPadding: 60 13 , trackMarkers: true 14 });
15 16 var southWest = new google.maps.LatLng(17.85, -67.35); 17 var northEast = new google.maps.LatLng(18.55, -65.2); 18 var lngSpan = northEast.lng() - southWest.lng(); 19 var latSpan = northEast.lat() - southWest.lat(); 20 for(var i=1; i<=1000; i++){ 21 var lat = southWest.lat() + latSpan * Math.random(); 22 var lng = southWest.lng() + lngSpan * Math.random(); 23 var latlng = new google.maps.LatLng(lat, lng); 24 var marker = new google.maps.Marker({ 25 position: latlng 26 }); 27 markers.push(marker); 28 } 29 google.maps.event.addListener(markerManager, 'loaded', function() { 30 markerManager.addMarkers(markers, 8, 10); 31 markerManager.refresh(); 32 }); 33 }; 34 35
Trabajando con los niveles

Se trabaja similar al MarkerClusterer pero se puede indicar en cada uno de los niveles de zoom, qu tipo de imagen queremos mostrar. map.js ? 01 window.onload = function(){ 02 var options = { 03 zoom: 13 04 , center: new google.maps.LatLng(18.372201, -66.139797) 05 , mapTypeId: google.maps.MapTypeId.ROADMAP 06 }; 07 var map = new google.maps.Map(document.getElementById('map'), 08 options); 09 var mnr = new MarkerManager(map); 10 google.maps.event.addListenerOnce(map, 'bounds_changed', function() 11 { 12 var markers = []; 13 var bounds = map.getBounds(); 14 var southWest = bounds.getSouthWest(); 15 var northEast = bounds.getNorthEast(); 16 var lngSpan = northEast.lng() - southWest.lng(); 17 var latSpan = northEast.lat() - southWest.lat(); 18 for (var i = 0; i < 1000; i++) { 19 var lat = southWest.lat() + latSpan * Math.random(); 20 var lng = southWest.lng() + lngSpan * Math.random(); var latlng = new google.maps.LatLng(lat, lng);
21 22 23 24 var marker = new google.maps.Marker({ 25 position: latlng 26 }); 27 markers.push(marker); 28 } 29 var bayamon = new google.maps.Marker({ 30 position: new google.maps.LatLng(18.383563, -66.162713) 31 , icon: 'http://google-maps-utility-library32 v3.googlecode.com/svn/trunk/markerclusterer/images/people35.png' 33 }); 34 google.maps.event.addListener(bayamon, 'click', function() { 35 map.setZoom(14); 36 map.setCenter(this.getPosition()); 37 }); 38 var guaynabo = new google.maps.Marker({ 39 position: new google.maps.LatLng(18.3580678, -66.112674) 40 , icon: 'http://google-maps-utility-library41 v3.googlecode.com/svn/trunk/markerclusterer/images/people35.png' 42 }); 43 google.maps.event.addListener(guaynabo, 'click', function() { 44 map.setZoom(14); 45 map.setCenter(this.getPosition()); 46 }); 47 var towns = [bayamon, guaynabo]; 48 google.maps.event.addListener(mnr, 'loaded', function() { 49 this.addMarkers(towns, 10, 13); 50 this.addMarkers(markers, 14); 51 this.refresh(); 52 }); 53 }); 54 }; 55 56 57 Si alejamos el mapa continuar con la misma imagen hasta el zoom 10, pero si lo acercamos veremos todos los marcadores. Es una buena forma de agrupar y mostrar de acuerdo al nivel de zoom que deseamos, esto nos da un mejor control. El prximo captulo estar dedicado a Geocoder.
Geolocalizacin, mviles y mapas

La Geolocalizacin es la determinacin de tu ubicacin geogrfica por medio de tu dispositivo mvil o tu computadora, por cualquiera de los medios disponibles para lograrlo. Para determinar tu ubicacin, existen varias maneras de hacerlo, entre ellas estn la identificacin del router al que te ests conectado, la red de tu proveedor, tu celular o directamente por el receptor interno de GPS de tu dispositivo. Para aprovechar la geolocalizacin de los visitantes de tu sitio o a tu aplicacin web ten en cuenta que no todos los navegadores lo soportan, es importante tambin mencionar que el usuario debe autorizar a tu sitio o aplicacin web para que sta obtenga tu posicin, no asumir en tu desarrollo que siempre vas a tener la ubicacin y saber manejar stas excepciones. No est de mas recalcar que ninguno de estos mtodos son parte de la API de Google Maps, en cambio, son las normas comunes de la industria. Cada da los navegadores ms recientes estn empezando a soportar el estndar del W3C de geolocalizacin.
Introduccin a la especificacin de la API de Geolocalizacin

La API de Geolocalizacin es un esfuerzo de la World Wide Web Consortium(W3C) para estandarizar una interfaz para recuperar la informacin de la localizacin geogrfica de un dispositivo cliente. La API define un conjunto de objetos, que se ejecutan en la aplicacin cliente para dar la ubicacin del dispositivo cliente a travs de la consulta de los servidores de informacin de la localizacin. Esto se realiza por medio de una interfaz de alto nivel de informacin de localizacin asociada slo con el dispositivo que aloja la aplicacin, la informacin que proporciona es la siguiente: latitud, longitud, altura, rumbo, velocidad y valores de precisin de los reportes. La API es independiente de las fuentes de informacin y debe ser transparente en su uso de como se obtuvo la localizacin. Algunas fuentes comunes de informacin sobre la ubicacin incluyen los Sistema de Posicionamiento Global (GPS) y la ubicacin originada de las seales de red como la direccin IP, RFID, WiFi y Bluetooth , redes GSM / CDMA de celulares, as como se puede hacer una entrada directa del usuario. Por lo anterior la API no puede garantizar devolver la ubicacin real del dispositivo.
Aplicaciones web en dispositivos mviles

La API de geolocalizacin es ideal para aplicaciones web en dispositivos mviles, que es el tema de est captulo. Sin embargo, hay que tener presente que an no existe un apoyo generalizado en plataformas mviles debido a la gran variedad de dispositivos y navegadores. En equipos Desktop, la API de geolocalizacin del W3C trabaja en Firefox desde la versin 3.5, Google Chrome, Opera 10.6 y en Internet Explorer desde la versin 9.0. En los dispositivos mviles, funciona en iPhone, Google Android (Desde Ver. 2.0 +), y Maemo. El API de Geolocalizacin W3C tambin est soportado desde la versin 10.1 de Opera Mobile disponible para Android y Symbian (S60 3 y 5 generacin). La API se ha diseado para permitir peticiones de posicin instantnea y peticiones continuas de actualizacin de posicin, as como la posibilidad de consultar explcitamente las posiciones en cach. La informacin de ubicacin est representada por coordenadas de latitud y longitud. Tcnicamente esta norma no es parte de HTML5 pero ya est siendo implementada como tal y probablemente se convertir en el estndar default en el futuro, recientemente sistemas mviles como los Blackberry de RIM que tenan otro estndar lo han adoptado a partir de la versin OS 6, los dispositivos Android y con iOs (iPod, iPad, IPhone) ya lo soportan.
Algunos navegadores utilizan direcciones IP para detectar la ubicacin de un usuario, aunque esto slo proporciona una estimacin muy aproximada. Solicitud de posicin instantnea: ? 01 02 03 04 05 06 07 08 function MostrarMapa(pos) { 09 // Cdigo para mostrar mapa centrado en 10 // pos.coords.latitude, pos.coords.longitude. 11 } 12 // Llamada de peticin de posicin instantanea 13 navigator.geolocation.getCurrentPosition(MostrarMapa); 14 Solicitud continuada de posicin: 15 function CentrarMapa(pos) { 16 // Cdigo para centrar el mapa en 17 // pos.coords.latitude, pos.coords.longitude, esta funcin se 18 ejecuta 19 // constantemente mientras el dispositivo detecte cambio de 20 posicin 21 } 22 // Solicitud de Monitoreo de Posicin 23 var MonitorearPosicion = 24 navigator.geolocation.watchPosition(CentrarMapa); 25 function buttonClickHandler() { 26 // Cancela las actualizaciones y llamadas a CentrarMapa, por 27 ejemplo 28 // al hacer Click en un botn 29 navigator.geolocation.clearWatch(MonitorearPosicion); 30 } 31 32 33 34 35 36 37
Ejemplo de localizacin bsica:

? 01 <!DOCTYPE html> 02 <meta charset="utf-8"> 03 <html>
04 05 06 07 08 <script type="text/javascript"> 09 function pedirPosicion(pos) { 10 document.write("Hola! Estas en : "+pos.coords.latitude+ 11 ","+pos.coords.longitude); 12 document.write(" Rango de localizacin de +/13 "+pos.coords.accuracy+" metros"); 14 } 15 navigator.geolocation.getCurrentPosition(pedirPosicion); 16 </script> 17 </html> 18 19 20 21 Te pedir que autorices a tu sitio que permita conocer tu ubicacin lo cual tienes que aceptar. Si todo te ha funcionado te debera salir algo as: Hola! Estas en : 14.5949159,-90.5117639 Rango de localizacin de +/- 80 metros Ver ejemplo: te proporcionar tu ubicacin si lo autorizas. Como pudiste ver esto no es parte de ninguna API de Google maps o algn otro servicio, es un estndar implementado en casi todos los navegadores modernos.
Hagamos un mapa centrado en nuestra ubicacin

Haremos un mapa muy simple, el cual inicia en una posicin y al presionar un link intenta geolocalizarte y centra el mapa en tu posicin, lo nico que hice es tomar el cdigo ya explicado y combinarlo con un mapa simple, para mas opciones sobre el mapa puedes consultar el captulo 1 de la Gua Mapas. ? 01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta name="viewport" content="width=device-width, initial05 scale=1.0, user-scalable=no" /> 06 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 07 <title>Ejemplo de un mapa muy simple y geolocalizacin - Google API 08 v3</title> 09 <script type="text/javascript" src="http://maps.google.com/maps/api/js? 10 sensor=false"></script> 11 <script type="text/javascript"> 12 var map; //importante definirla fuera de la funcion initialize() 13 para poderla usar desde otras funciones. 14 function initialize() { 15 var punto = new google.maps.LatLng(17.22207, -89.6235); //ubicacin
del Plaza Central de Tikal, Guatemala var myOptions = { zoom: 18, //nivel de zoom para poder ver de cerca. 16 center: punto, 17 mapTypeId: google.maps.MapTypeId.SATELLITE //Tipo de mapa inicial, 18 satlite para ver las pirmides } 19 map = new google.maps.Map(document.getElementById("map_canvas"), 20 myOptions); 21 } 22 //copiamos la funcin de geolocalizacin del ejemplo anterior. 23 function pedirPosicion(pos) { 24 var centro = new 25 google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); 26 map.setCenter(centro); //pedimos que centre el mapa.. 27 map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //y lo volvemos un 28 mapa callejero 29 alert("Hola! Estas en : "+pos.coords.latitude+ 30 ","+pos.coords.longitude+" Rango de localizacin de +/31 "+pos.coords.accuracy+" metros"); 32 } 33 function geolocalizame(){ 34 navigator.geolocation.getCurrentPosition(pedirPosicion); 35 } 36 </script> 37 </head> 38 <body onload="initialize()"> 39 <div id="map_canvas" style="width:640px ;height:480px"></div> 40 <a href="#" onclick="geolocalizame()">Ahora llevame a mi ubicacin</a> </body> </html> Como ves, tom el cdigo que habamos hecho antes y lo modifiqu para ponerlo en un mapa.
Ver ejemplo: revisa cmo funciona el mapa.
Conclusiones
La API de Google Maps V3 ha sido diseada para cargar rpidamente y funcionar bien en dispositivos mviles. Esta se ha centrado principalmente en telfonos Android y iPhone, lo cual es una ventaja pues no tenemos que hacerle nada a nuestro mapa para que ste puedar ser visto en un telfono celular de los mencionados, incluso cambiando los controles automticamente de acuerdo al dispositivo. La especificacin de Geolocalizacin de W3C es mucho mas extensa, puedes agregar controles para mejorar la precisin, forzar actualizaciones constantes entre otras cosas, sto depender de la necesidad que tengas de tener el GPS prendido todo el tiempo toda vez que es un elemento a considerar por el consumo de tu batera.
Open Street Maps: buscando alternativas a Google Maps

Quieres saber como llegar a X lugar? Ubicar en donde ests? Ests desarrollando un proyecto que requiere utilizar mapas? Seguramente recurres a la herramienta salvadora: Google Maps. Este servicio fue creado por Lars y Jens Rasmussen y es ofrecido por Google desde el ao 2006. En la guia mapas te ayudamos a dar los primeros pasos con la API, crear marcadores y trabajar con geolocalizacin. La API de Google Maps ha sufrido cambios en lo que se refiere a la utilizacin libre y gratuita de la plataforma: a partir de 20.000 teselas los desarrolladores tienen que comenzar a pagar pero hay alternativas viables para utilizar y desarrollar mapas, hoy queremos hablar de OpenStreetMap.
Contactamos a referentes del proyecto en diferentes pases de latinoamrica, ellos nos comentaron sobre OSM como alternativa, las caractersticas de la comunidad y nos hablaron de los cambios en la API de Google Maps.
OpenStreetMap: Mapas por y para todos

Julio Costa, es chileno, trabaja como asesor de eLearning en el ministerio de defensa de su pas, es fundador de ZambelliKnowledge y miembro fundador de OpenStreetMap Chile. En un artculo que escribi sobre OpenStreetMap en Latinoamrica nos comentaba en qu consiste el proyecto: OpenStreetMap (OSM) es un proyecto global destinado a generar y proveer datos geogrficos libres a todos quienes lo requieran. Una de las razones para iniciar el proyecto fue que los datos geogrficos que normalmente consideramos libres, no lo son realmente. En muchos casos se trata de la dicotoma Gratis/Libre. Para ser parte del proyecto uno tiene que querer mapear y tener conocimientos informticos mnimos ya que segn Julio incluso el editor ms fcil tiene una curva de aprendizaje bastante empinada. Nos comenta tambin que debe tener cierta tica para no romper los mapas de otros usuarios, nos hemos topado con usuarios que crean ciudades fantasmas. El verdadero desafo es que se difunda el proyecto, para que a la gente le interese mapear. El objetivo de OSM es claro, Julio nos dice que es: Generar cartografa y ponerla a disposicin de todo el mundo.
Ventajas de OSM frente a Google Maps

En lo que coinciden todos es que la gran ventaja de OSM se resume en una palabra: Libertad. Como dice Hernn Ramirez (Venezuela): En OSM los mapas son libres de verdad. Es libre para uso comercial o personal y los datos geogrficos se pueden descargar en formato digital (a diferencia de Google Maps) y pueden ser utilizados en cualquier formato SIG, receptor GPS, o servidor de geodatos. Adems el mapa es fcilmente editable y personalizable nos cuenta Gustavo Jarrn (Ecuador).
Ante los cambios de Google Maps, es un buen momento para conocer OSM
Sebastin Dulmont (@sd), utiliza muchos mapas para su sitio Streeteasy.com, un buscador web de bienes races. En una entrevista nos coment que utilizaban Google Maps y que estaban muy contentos con el servicio pero al modificarse los precios y ser ms estrictos con el pago, tuvieron que pensar en otra alternativa. Ante la perspectiva de tener que pagar 100.000$ si seguan con el servicio de Google Maps, Sebastin y su equipo buscaron otras alternativas cartogrficas opensource, entre las cuales encontraron a OSM. Una de las ventajas principales fue la posibilidad de modificar algo si estaba mal y mayor control de la informacin.
Lo importante no es que una plataforma sea gratis, lo importante es que sea libre.
Las comunidades de OSM en latinoamrica, ven una alternativa viable no solo por ser gratis sino porque la informacin te pertenece. Nos dice Julio Costa que la api de Google Maps tiene muchas opciones y a nivel de grandes empresas y multinacionales quizs sea bueno pero la api de OSM lo que hace es intermediar entre los seguidores y la base de datos. Dar herramientas para crear los datos, almacenarlos y ponerlos a disposicin de todo el mundo. Norman Avila, autor de captulos para la gua Mapas, nos dice que OSM naci como plataforma abierta y permanece abierta, es la alternativa ms consistente y ms confiable. Segn los datos actualizados que nos brind Julio en la entrevista, OSM ya lleg a los 500.00 usuarios registrados que es la gente que efectivamente puede editar los mapas, ya que no hay ediciones annimas como en Wikipedia. Para todos los que alguna vez hemos utilizado o hemos desarrollado mapas para nuestros sitios, sin duda que Google Maps nos ha sido de gran ayuda. Sin embargo el ecosistema ha cambiado y hay que pensar en alternativas para hacer ms rentables nuestros sitios y apoyar en cierta manera el movimiento opensource que cada vez est tomando ms fuerza.

Guia Mapas

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia Mapas

Enviado por

Direitos autorais:

Formatos disponíveis

Google Maps API V3 introduccin y primeros pasos

Cmo funciona Google Maps?

Cunto es el mximo de decimales?

Preparando el rea de trabajo

Modificar los valores ya asignados

setCenter(google.maps.LatLng(latitud, longitud)) getMapTypeId() setMaptTypeId(google.maps.MapTypeId.*)

Marcadores, posicionar una imagen en el mapa

Aadir varios marcadores

Ajustar automticamente la ventana para adaptarse a todos los marcadores

Personalizar el marcador con MarkerImage

Cambiar imagen conforme a un evento

Consejos prcticos para el InfoWindow en Google Maps

mtodo setZIndex indicando el ltimo valor numrico que se encuentra en la variable n

Aadir video de Youtube

60 61 }); 62 }) 63 })(n++, popup, marker); 64 } 65 }; 66

Polilneas y Polgonos en Google Map

Libreras y manejo masivos de marcadores

Manejando los marcadores

Trabajando con los niveles

Geolocalizacin, mviles y mapas

Introduccin a la especificacin de la API de Geolocalizacin

Aplicaciones web en dispositivos mviles

Ejemplo de localizacin bsica:

Hagamos un mapa centrado en nuestra ubicacin

Ver ejemplo: revisa cmo funciona el mapa.

Open Street Maps: buscando alternativas a Google Maps

OpenStreetMap: Mapas por y para todos

Ventajas de OSM frente a Google Maps

Você também pode gostar