feed twitter facebook LinkedIn facebook

Google » Ventanas de información con imágenes en Google Maps

septiembre 23, 2009 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Ya hace tiempo que veíamos el ejemplo de cómo mostrar una ventana de información en Google Maps. Pero dicho ejemplo nos daba poco juego ya poniendo texto en la ventana de información no llegamos muy lejos.

Ahora vamos a ver como poner ventanas de información con imágenes. Bueno, con imágenes y con más cosas. La verdad que lo que hacemos es cargar una ventana de información que nos permita cargar HTML. Pero vamos por pasos... lo primero, siempre, crear un área para el mapa y cargar Google Maps.

  1. <title>Ventana de información con imagen</title>
  2. <script src="http://maps.google.com/maps?file=api&v=2.x&key=CLAVE" type="text/javascript"></script>
  3.  
  4. <script type="text/javascript">
  5.  
  6. //<![CDATA[
  7.  
  8. function load(){
  9. if (GBrowserIsCompatible())
  10. var map = new GMap2(document.getElementById("mapa"));
  11. }
  12. //]]>
  13. </script>
  14. </head>
  15. <body onload="load();" onunload="GUnload();">
  16. <h1>Ventana de información con imagen</h1>
  17.  
  18. <div id="mapa" style="width: 800px;height: 600px;">
  19. </div>
  20.  
  21. </body>
  22. </html>

Los pasos, ya explicados en Cargando Google Maps, se pueden resumir en:

  • Cargar el script de Google Maps
  • Definir una capa donde irá el mapa
  • Cargar el Mapa, vía función onLoad, en la capa
  • Indicar la función GUnload en el onunload de la página, para liberar memoria

Cargar la ventana de información que lleve el HTML lo hacemos mediante el método .openInfoWindowHtml(). Este método recibe como parámetros la longitud-latitud, representado por una clase GLatLng, en la cual se abrirá la la ventana y el HTML que queremos cargar.

Así que incluir la imagen será tan sencillo como poner el siguiente código:

  1. map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),"<h3>Casa Rural Los Tejos</h1><img src='casarural.jpg' style='float:left;margin-right:40px;'> Distribución:<ul><li>1 Habitación de matrimonio</li><li>2 habitaciones dobles</li><li>2 cuartos de baño completos</li><li>1 aseo</li><li>Cocina</li><li>...</li></ul>");

Vemos que no solo cargamos la imagen mediante la etiqueta IMG, si no que hemos incluido un titular con H3 y una lista de elementos con UL. El resultado... pues compruébalo tu mismo. :-)

Google » Poner un icono dentro de Google Maps

junio 21, 2009 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Para poner un icono dentro de Google Maps lo que tenemos que hacer es poner una marca. La marca está representada mediante la clase GMarker.

Los primeros pasos son los de siempre y que podéis leer detenidamente en Cargando Google Maps. Si bien, resumidamente, consisten en:

  1. Cargar Google Maps
    1. <script src="http://maps.google.com/maps?file=api&v=2&key=miclave" type="text/javascript"></script>
  2. Definir un área para el mapa
    1. <div id="mapa" style="width: 400px; height: 300px;"></div></script>
  3. Instanciar el mapa
    1. if (GBrowserIsCompatible()) {
    2. map = new GMap(document.getElementById("mapa"));
    3. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
    4. }

Lo siguiente que pasaremos a realizar será la carga del icono dentro de Google Maps. Para ello creamos una instancia de la clase GMarker.

  1.  
  2. var marker = new GMarker(new GLatLng(40.655997,-4.700518));
  3.  

La clase GMarker recibe como parámetro un punto: ya sea relativo al mapa (GPoint) o una Latitud-Longitud (GlatLng). En nuestro caso nos hemos decantado por la segunda opción y hemos pasado como parámetro de la clase GMarker una clase GlatLng.

Una vez creada la marca tendremos que insertarla dentro del mapa. Para ello utilizamos el método .addOverlay() de la clase GMap2. Finalmente nos quedan dos líneas de código muy sencillas, las cuales nos permiten poner un icono dentro de Google Maps.

  1.  
  2. var marker = new GMarker(new GLatLng(40.655997,-4.700518));
  3. map.addOverlay(marker);
  4.  

Google » Modificar longitud y latitud en Google Maps

enero 17, 2009 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Las posiciones dentro de Google Maps se indican mediante una longitud y una latitud. Concretamente Google Mapss nos ofrece la clase GLatLng, la cual pasándola como parámetro la latitud y la longitud nos devolverá un punto en concreto.

En este ejemplo vamos a crear un formulario que nos permita introduccir latitudes y longitudes que actualicen el centro del mapa cargado en pantalla.

Lo primero será cargar el mapa de Google Maps. Para ello utilizamos la función load() estándar:

  1. <script type="text/javascript">
  2.  
  3. var map;
  4.  
  5. function load(){
  6. if (GBrowserIsCompatible()) {
  7. map = new GMap2(document.getElementById("mapa"));
  8. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  9. }
  10. }
  11. </script>

Hay que destacar que en este caso la variable que instancia el objeto GMap2, y por consiguiente el mapa, la declaramos fuera de la función, como una variable global. Esto lo hacemos ya que a posteriorío vamos a crear otras funciones que interactuen con el mapa.

En el cuerpo de la página, en el evento onLoad cargamos esta función y por cuestiones de optimización llamamos a GUnload en el evento onUnload.

  1. <body onload="load();" onunload="GUnload();">

Una vez cargado el mapa creamos el formulario. Esto es una tarea sencilla, ya que serán dos campos input de tipo text donde introduzcamos la latitud y la longitud. Al formulario le vamos a añadir dos botones. Uno que desplace el mapa a la latitud y longitud introducida por el usuario y el segundo que nos devuelva el mapa a la posición inicial.

  1.  
  2. <label for="latitud">Latitud: </label><input type="text" id="latitud" value="40.655997">
  3. <label for="longitud">Longitud: </label><input type="text" id="longitud" value="-4.700518"><br />
  4. <input type="button" value="Cambiar" onClick="cambiar(document.getElementById('latitud').value, document.getElementById('longitud').value);"/>
  5. <input type="button" value="Punto de Origen" onClick="cambiar(40.655997,-4.700518);"/>
  6.  
  7. </form>
  8.  

Vemos que ambos botones en el evento onClick están llamando a la función cambiar, la cual recibe dos parámetros longitud y latitud.

Ahora pasamos a codificar dicha función. Para mover el mapa a una latitud y longitud en concreto deberemos de utilizar el método .panTo, el cual recibe una clase GLatLng. La clase GLatLng es muy sencilla de instanciar, ya que solo hará falta indicarle la latitud y longitud.

El código de la función nos quedaría de la siguiente forma:

  1. function cambiar(latitud,longitud){
  2. map.panTo(new GLatLng(latitud,longitud));
  3. }

Vemos que el método .panTo lo ejecutamos sobre la variable global map que es la que instancia el objeto GMap2.

Google » Tipos de mapas con Google Maps

enero 13, 2009 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Cuando cargamos un mapa con Google Maps, este, por defecto, se carga en su vista de mapa predeterminada. Esta vista es la del formato callejero.

Puede suceder que queramos cambiar el tipo de mapa que estamos mostrando. Los tipos de mapas que nos ofrece Google Maps son:

  • Mapa Callejero - G_NORMAL_MAP
  • Mapa Satélite - G_SATELLITE_MAP
  • Mapa Híbrido - G_HYBRID_MAP
  • Mapa mezcla de los tres anteriores - G_DEFAULT_MAP_TYPES

Nos apoyaremos en el método setMapType de la clase GMap2 para cambiar la visualización del mapa. Así, si queremos poner el mapa en formato satélite tendremos las siguientes líneas:

  1. var map = new GMap2(document.getElementById("mapa"));
  2. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  3. map.setMapType(G_SATELLITE_MAP);

Google » Abrir una ventana de información en Google Maps

enero 22, 2008 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Una de las cosas que podemos hacer sobre los mapas de Google Maps es abrir una ventana de información. Esta nos servirá para dar información adicional sobre el punto localizado.

Para ello el propio objeto GMap2 nos ofrece un método llamado openInfoWindow. Lo primero que tenemos que hacer es cargar el API de Google Maps. Para ello utilizamos el siguiente código JavaScript:

Continue reading Abrir una ventana de información en Google Maps...

Google » Generando lineas geodésicas en Google Maps

diciembre 12, 2007 por Víctor Cuervo 11 Comentarios Imprimir Imprimir

Una línea de geodésica es la línea de menor longitud entre dos puntos dados. Podríamos hablar de la distancia menor entre dos puntos terrestres.

Y es que si vemos un mapa del mundo aplanado, la distancia más corta entre dos puntos no es una linea recta, sino que será la línea geodésica.

En el artículo base de este original, el autor habla de un viaje Londres-San Francisco, en el cual la ruta que se sigue no es la línea recta que atravesaría todo Estados Unidos, sino que el avión sube hasta Groelandia y entra por la frontera de Canada, siguiendo la línea geodésica.

Continue reading Generando lineas geodésicas en Google Maps...

Google » Cargando Google Maps

abril 6, 2007 por Víctor Cuervo 4 Comentarios Imprimir Imprimir

Una de las cosas que "está pegando fuerte" con la llamada Web 2.0 son los mashup. El mashup consiste en mezclar fuentes de información, utilizando diferentes tecnologías (RSS, ATOM, JavaScript,...), para ofrecer un resultado conjunto.

Una de las fuentes de datos que más ha pegado con los mashup ha sido Google Maps. Google Maps es la herramienta de Google que te permite localizar cualquier lugar del mundo, permitiéndote ver el mapa de la zona, la vista de satélite de dicha zona o ambos.

Los mashup que han salido han sido muchos. Por ejemplo localizaciones para la venta de pisos, situación de restaurantes, fuentes de tráfico,...

Lo primero que tendremos que hacer para poder utilizar Google Maps en nuestras páginas será hacernos con una clave de utilización. Esta clave nos la proporciona Google de forma gratuita (solo se necesita una cuenta en Google). Para ello tendremos que ir a http://www.google.com/apis/maps/signup.html. Una vez rellenados los datos tendremos una clave, la cual necesitaremos cuando codifiquemos.

Para cargar Google Maps en nuestra página deberemos de incluir el siguiente script.

  1. <script src="http://maps.google.com/maps?file=api&v=2&key=miclave"
  2. type="text/javascript"></script>

Donde "miclave" es la clave que os ha proporcionado Google Maps. A partir de este momento ya tenemos acceso vía JavaScript al API de Google Maps.

El código para cargar el mapa es sencillo. Lo primero que deberemos hacer es crear una capa en la página, donde vayamos a posicionar el mapa. A esta capa la tendremos que dar un id.

  1. <div id="mapa" style="width: 400px; height: 300px;">
  2. </div>

En nuestro caso el id es "mapa". Este id nos servirá para hacer referencia desde el código JavaScript. Para crear el mapa utilizamos la función GMap2. La cual espera el elemento de la página sobre el que se cargará el mapa.

  1. var map = new GMap2(document.getElementById("mapa"));

Una vez hemos cargado el mapa habrá que darle una ubicación. Las ubicaciones se manejan mediante la clase GLatLng. La cual recibe como parámetros la longitud y la latitud del punto geográfico a buscar.

La clase GLatLng será utilizada por el método setCenter de la clase GMap2 para ubicar la imagen del mapa. La línea de código será la siguiente:

  1. map.setCenter(new GLatLng(40.674389,-4.700432), 12);

Puede ser que el API de Google Maps no funcione en ciertos navegadores. Es por ello que tenemos la función GBrowserIsCompatible() la cual nos indica si el navegador sobre el que se ejecuta es compatible.

Juntando todo nuestro código podemos componer la siguiente función:

  1. function load(){
  2. if (GBrowserIsCompatible()) {
  3. var map = new GMap2(document.getElementById("mapa"));
  4. map.setCenter(new GLatLng(40.674389,-4.700432), 12);
  5. }
  6. }

Para finalizar es bueno saber que si lanzamos la función GUnload liberaremos las estructuras utilizadas en memoria. Es por ello que es recomendable hacerlo al salir de la página. Es decir, en el método onunload.

<body onload="load();" onunload="GUnload();">

Se puede encontrar más documentación sobre Google Maps en http://www.google.com/apis/maps/documentation/

Visualizar el ejemplo | Descargar el código