Visualización de Información - Capit. 7

Transcripción

Visualización de Información
Capit. 7
Dr. Ivo H. Pineda Torres
Facultad de Ciencias de la Computación
Benemérita Universidad Autónoma de
Puebla
Ototño 2012
CAPÍTULO 7
Trabajando sobre la InfoWindow, y trucos al respecto
2 of 23
Empecemos con algo así
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Chapter 7 - InfoWindows Tips and Tricks</title>
<link rel="stylesheet" href="css/style.css" type="text/css"
media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/7-x.js"></script>
</head><body>
<div id="map"></div>
3 of 23
</body></html>
Empecemos con estilo:CSS
html , body {
h e i g h t : 100 %;
f o n t −f a m i l y : Verdana , Geneva , A r i a l , H e l v e t i c a , s a n s −
f o n t −s i z e : s m a l l ;
margin : 0 ;
}
#map {
w i d t h : 100 %;
h e i g h t : 100 %;
}
4 of 23
(function() {
// Defining variables to some functions
var map, infoWindow;
window.onload = function() {
// Creating a map
var options = {zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById(’map’),optio
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.756054, -73.986951),
map: map,
title: ’Click me’
});google.maps.event.addListener(marker, ’click’, function()
// Code that happens after click
});};})();
5 of 23
Cadenas en html
Recuerda que se debe verificar que exista la ventana denominada
Infowindow
// Check to see if an InfoWindow already exists
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
Ahora ponemos contenido y se puede abrir
<div id="info">
<img src="img/squirrel.jpg" alt="" />
<h2>Mapas son hermosos</h2>
<p>Some sample text</p>
<p><a href="http://www.svennerberg.com">A sample link</a>
</p></div>
6 of 23
7 of 23
Creando un mapa detallado. Añadiendo detalles
En varias ocasiones se necesita incorporar detalles a nuestro mapa.
Estos detalles pueden salir en forma de ventanas de información y
presentando mas detalles sobre l lugar donde se colocó el marcador.
¿Cómo hacerlo? que sugiere está imágen.
8 of 23
Poner más detalles en la InfoWindow
Para lograr esto en vez de crear un segundo mapa en la sección de
html, lo sugerido es crear otro mapa pero dentro del script y en
especial dentro de la ventana. El mapa se asume que ya se le ha
colocado una marca.
g o o g l e . maps . e v e n t . a d d L i s t e n e r ( marker , ’ c l i c k ’ ,
function (){
// C ó d i g o que s e e j e c u t a r á a l h a c e r c l i c k
});
9 of 23
colocado una marca.
function (){
});
Esto indica que se necesita crear un contenedor para el nuevo mapa,
para lo que usamos la método genérico DOM
document.createElement().
9 of 23
colocado una marca.
function (){
});
Esto indica que se necesita crear un contenedor para el nuevo mapa,
para lo que usamos la método genérico DOM
document.createElement().
Junto a esto se debe definir el tamaño del mapa, y la sugerencia es
que tanto estilo como tamaño controlarlo por separado. (aca es para
que
se comprenda)
9 of 23
Asi serían los primeros pasos
Paso 1 // Crea el elemento div que será el lugar de contenedor con
los detalles del mapa
var detailDiv = document.createElement(’div’);
// Define el tamaño del área
detailDiv.style.width = ’200px’;
detailDiv.style.height = ’200px’;
Posteriomente se necesita hacer referencia a él:
Paso 2 // Apendizar la variable detailDiv al contendero del mapa
document.getElementById(’map’).appendChild(detailDiv);
10 of 23
Paso 3
Como ves no se ha creado el mapa y si recuerdas para hacerlo
debemos definir:
11 of 23
Paso 3
debemos definir:
1. Definir el zoom adecuado: 14
11 of 23
Paso 3
debemos definir:
2. Definir el centro del mapa donde se desea detalle. Use
getPosition() en el lugar donde está ubicado el marcador.
11 of 23
Paso 3
debemos definir:
3. Tipo de mapa (satélital, carretera o híbrido). Use getMapTypeId()
Para asegurarse que si se cambian detalles en el mapa principal
tambien se propague al mapa detallado.
11 of 23
Paso 3
debemos definir:
11 of 23
Paso 3
debemos definir:
Esto nos puede ser útil para no apartarnos de la marca de nuestra
casilla y mostrar los detalles de la misma sin necesidad de irnos a otro
mapa o vista.
11 of 23
Paso 4. Así lo podemos utilizar
var overviewOpts = {
zoom: 14,
center: marker.getPosition(),
mapTypeId: map.getMapTypeId(),
disableDefaultUI: true
};
// Inicializar el mapa y marcarlo
var detailMap = new google.maps.Map(detailDiv, overviewOpts);
var detailMarker = new google.maps.Marker({
position: marker.getPosition(),
map: detailMap,
clickable: false
});
12 of 23
Paso 5: Crear la ventana de información
// Checa s i e x i s t e l a v e n t a n a
i f ( ! infoWindow ) {
infoWindow = new g o o g l e . maps . InfoWindow ( ) ;
}
// Poner c o n t e n i d o en l a InfoWindow
infoWindow . s e t C o n t e n t ( d e t a i l D i v ) ;
// Poner l a InfoWindow en e l mapa
infoWindow . open ( map , m a r k e r ) ;
13 of 23
Pasos en resumen
1. Añadir un evento tipo click
14 of 23
Pasos en resumen
2. Crear el mapa detallado poniendo un nuevo elemento < div > y
colocarlo allí.
14 of 23
Pasos en resumen
2. Crear el mapa detallado poniendo un nuevo elemento < div > y
colocarlo allí.
3. Crea o reusa una InfoWindow y añadir el mapa detallado
14 of 23
alternativa interesante
Evita que el zoom se haga através de los controles y sea dentro de la
ventana de información.
Antes del Zoom
Después del zoom
15 of 23
Pasos
1. Crea el contenido de la InfoWindow
16 of 23
Pasos
2. Crea la InfoWinodw
16 of 23
Pasos
2. Crea la InfoWinodw
3. Abre la InfoWinodw
16 of 23
Pasos
// C r e a c i ó n d e l c o n t e n e d o r InfoWindow
v a r c o n t e n t = document . c r e a t e E l e m e n t ( ’ d i v ’ ) ;
// Crea e l p á r r a f o con a l g o de t e x t o
v a r p = document . c r e a t e E l e m e n t ( ’ p ’ ) ;
p . innerHTML = ’ T h i s m a r k e r i s p o s i t i o n e d on Manhattan
// Crea un s e g u n d o p á r r a f o con e l
l i n k que s e h a r á
v a r p2 = document . c r e a t e E l e m e n t ( ’ p ’ ) ;
// C r e a c i ó n d e l l i n k
v a r a = document . c r e a t e E l e m e n t ( ’ a ’ ) ;
a . innerHTML = ’ Zoom i n ’ ;
a . h r e f = ’# ’;
17 of 23
Con el elemento < a > creado
El trabajo pesado lo hará:
a . onclick = function () {
// Code g o e s h e r e
}
Pasos para establecer el link:
18 of 23
}
18 of 23
}
3. si no se desea seguir el link se debe cancelar automáticamente.
18 of 23
Asi irá quedando
map . s e t C e n t e r ( m a r k e r . g e t P o s i t i o n ( ) ) ;
map . setZoom ( 1 5 ) ;
return false ;
};
19 of 23
Y los párrafos mencionados se deben referenciar
// R e l a c i o n a r l e l s e g u n d o p á r r a f o con e l l i n k
p2 . a p p e n d C h i l d ( a ) ;
// R e l a c i o n a r l o s d o s p á r r a f o s con e l c o n t e n d o r
content . appendChild (p ) ;
c o n t e n t . a p p e n d C h i l d ( p2 ) ;
Se ha añadido código HTML al contenido de una InfoWindow, se ha
controlado el uso del Zoom y se ha incoporado seguior links.
Ver código completo listig 7-8 pp 154-155 (172-173pdf)
CREACIÓN DE LINEAS Y POLIGONOS PARA DELIMITAR ÁREAS.
20 of 23
No a la Reforma Laboral, te explotarán más!!!
!!México, SIN PRI
21 of 23

Visualización de Información - Capit. 7

Transcripción

Documentos relacionados

93.417.78.43 E-Mail:

Marcadores y +++ - Benemérita Universidad Autónoma de Puebla