¿Qué es un Info Window?

Quizá han visto que en muchos de los mapas de mostrados con la tecnología de Google, al dar clicks sobre los marcadores, mapa, formas, etc., nos aparece un cuadro con información, bien, pues eso es un Info Window.

Las opciones que usaremos para la creación del objeto de InfoWindow contendrá los siguientes campos:

• content contiene una cadena de texto o nodo DOM que mostrará al abrir la ventana de información.
• position contiene el LatLng al cuál estará asignado, ten en cuenta que si es asignada a un marcador, automáticamente adquiere el valor de su posición, en caso de no asignarle algún LatLng toma el centro que se muestra por primera vez del mapa, para los polígonos trabaja de manera diferente y lo hablaremos en otro post.
• maxWidth especifica el ancho máximo en pixeles, que podrá adquirir la ventana, por default adquiere el ancho del contenido, sin saturar el espacio del mapa, haciendo saltos de línea en automático, cuando el contenido ha alcanzado el máximo permitido, se expandirá verticalmente igual, sin saturar el espacio del mapa. En caso de que se establezca un determinado ancho, el texto en automático dará saltos de línea al llegar al límite establecido, si el contenido es mucho se extenderá verticalmente sin saturar el espacio.

El contenido del InfoWindow puede contener una cadena de texto, un fragmento de código HTML, o un mismo elemento DOM. Para establecer este contenido, debe hacerse una llamada explícita al constructor del InfoWindow con setContent(). Ten cuidado al usar div’s ya que si le pones estilos y sobrepasa el espacio puede “derramarse” el contenido fuera del InfoWindow.

Ahora si vamos directo al código, este ya solamente es el JavaScript, recuerda agregar jQuery también:

var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
var myOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

var contentString = '<div id="div_ejemplo">'+
    '<p>Este es un ejemplo de <b>InfoWindow</b>, ' +
    'como puedes ver puedes agregar cualquier cosa, ' +
    'cualquier <em>HTML</em>.</p>' +
    '<p>Este InfoWindow tiene un ancho de 200px ' +
    'y autom&aacute;ticamente da los saltos de l&iacute;nea.</p>'+
    '<p>Para ver el tutorial <a href="http://jafrancov.com/2010/09/info-window-gmaps-api-v3/">'+
    'clickea aqu&iacute;</a>.</p>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Ejemplo InfoWindow"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Solamente un último detalle antes de terminar, podrán observar que al final vemos un addListener, para que se pueda mostrar el InfoWindow al hacer click, es necesario agregar un Listener, que valga la redundancia, está a la escucha de un click, analicémoslo:

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Vamos por partes google.maps.event.addListener, es una función integrada de la API que agregará el listener, requiere de 3 cosas, a quién se le va a asignar el listener, en este caso a marker que es la variable que almacena el objeto del marcador que se dibuja, el tipo de listener que para este caso es un ‘click’ y por último el proceso que realizará, que para el ejemplo es una función. Dentro de la función especificamos lo que hará el listener, haremos uso de infowindow que es la variable que contiene el objeto con los detalles del InfoWindow por supuesto, a la cual se le llama la función open() que es la que se encargará de mostrar el InfoWindow, y esta funcióna a su vez, requiere de 2 parámetros, el primero en qué objeto de mapa se va a agregar (map) y segundo, a qué objeto se le va a asignar (marker), en caso de que no se especifique la segunda variable, se mostrará en el centro inicial del mapa.

Ahora si es todo por este tutorial, espero les sirva, si tienen dudas ya saben dónde y cómo preguntar

Enjoy this Life!!

Lo que voy a intentar hacer es ir al grano del tema del post, para no dar tantas vueltas y quitar toda la paja que viene en la documentación… “Directo y a la cabeza” dicen por ahí.

Para iniciar será necesario y preferente que tengan un poco de conocimiento principalmente de JavaScript y jQuery, asímismo de HTML y un poco de CSS, igual unas pequeñas nociones de HTML5 nos servirán en publicaciones posteriores.

Para empezar hay que declarar nuestra aplicación como HTML5, sencillamente escribiendo el DOCTYPE así:

<!DOCTYPE html>

También para estos ejemplos es necesario incluir los scripts de jQuery, para este dirígete a su sitio oficial, descárgalo y agrega el script, y claro el más importante de estos ejemplos, el script de Google Maps, que para la v3 no es necesario generar una key como en la versión 2 se hacía, ahora solamente agregas el siguiente script:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

Si puedes observar, al final del script dice sensor=set_to_true_or_false es para indicar si queremos que el sensor identifique la posición del usuario, debes indicar true o false según lo requiera tu aplicación.

NOTA: hay una pequeña discusión sobre la localización de los scripts, puedes ponerlos ya sea dentro del head o del body, pero muchos recomiendan que vayan antes de cerrar la etiqueta body, ya que evita que el contenido principal tarde en mostrarse, entonces… es tu decisión donde colocarlos, al final de cuentas para fines didácticos, funcionan igual en cualquier lado.

Dentro del body vamos a declarar un DIV que incluya su id y estilos para un ancho y alto donde queramos que se dibuje el mapa, debe ser algo como esto:

<div id="map_canvas" style="width: 640px; height: 400px;"></div>

Ahora vamos con las opciones del mapa, primero declaremos la latitud y longitud donde queremos que aparezca nuestro mapa de esta manera:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Lo que hace esa línea de código, es que creamos una instancia de un objeto de la API de GMaps que guardará la latitud y longitud del mapa, marcador o sea lo que sea que queramos dibujar, así que recuérdenla bien para futuros usos.

Los valores pueden variar de la siguiente manera:

• myLatitude es el valor del ángulo que parte del ecuador, puede variar de 90 a -90 de norte a sur respectivamente, siendo 0 el ecuador.
• myLongitude es el valor que parte del meridiano de Greenwich, o sea a partir de Londres, Inglaterra, tomando valores que varian de -180 a 180 de este a oeste respectivamente siendo 0 en Londres.

TIP: Si quieres obtener la latitud y longitud específicos dirígete a Maps.Google.com y en los Labs, activa el marcador de latitud y longitud.

Ahora, vamos con las opciones del mapa, las vamos a declarar de la siguiente forma:

var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Fácil de entender, ¿no?, lo que se realiza con esto es que a myOptions se le adjuntan las opciones propias de despliegue del mapa, zoom, es el nivel de visión del mapa, el más bajo 1, el más alto puede variar, ya que en algunos lugares puede ser hasta de un nivel 25 (hasta donde he descubierto), ya dependerá de lo que quieras mostrar en tu aplicación; center, si claro, centra el mapa con la latitud y longitud que un paso antes hemos declarado con la variable myLatlng; mapTypeId es una variable que interpreta el tipo de mapa que se va a desplegar, los cuales pueden ser estos:

• ROADMAP muestra el mapa normal, el que es en 2D, si no se declara nada, este es el tipo por default.
• SATELLITE muestra las cuadros fotografiados de la superficie.
• HYBRID muestra una combinación de cuadro fotográficos, y el mapa 2D con nombres de calles y demás sobrepuesto, es como sobrevolar la superficie con todo y direcciones.
• TERRAIN muestra cuadros del relieve físico de la tierra, elevaciones, ríos, montañas, entre otros.

Lo que prosigue es crear una instancia que guarde, interprete y dibuje todas las opciones que hemos visto de un mapa, recuerden tener jQuery cargado para que les funcione este script:

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

Así creamos la instancia al mapa y le decimos que lo coloque en el DIV con el ID de map_canvas, así como las opciones que requiere el mapa para ser desplegado correctamente. La variable map nos servirá más delante para tener control sobre el mismo mapa, como dibujar marcadores, formas, líneas, etc., haciéndole referencia.

Por último vamos a colocar/dibujar un marcador, un pin, o como lo quieran llamar, es muy simple hacerlo:

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });

Estas son las opciones básicas y quizá mínimas para dibujar un marcador, para position usaremos la misma variable que usamos para centrar el mapa y colocar el marcador en el centro del mismo, map es la instancia del objeto del mapa sobre el que vamos a colocar el marcador, title es el tooltip del marcador (el que dice un texto cuando dejamos encima el puntero).

Entonces al final, el código lo colocamos en una función que llamaremos initialize, para poder llamarlo posteriormente en cualquier parte de nuestro sitio, que para el ejercicio lo haremos en cuanto se cargue el body, agregando en la etiqueta de apertura:

<body onload="initialize()">

Aunque puedes llamar la función desde cualquier otro lado, ahora si nuestro documento con todo y el script debe verse algo semejante a esto:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 640px; height: 400px;"></div>
</body>
</html>

Es todo por esta ocasión, ya tengo otros ejercicios listos, solamente falta desglozarlos, cualquier duda, ya saben cómo contactarme :D.

Enjoy this Life!!