jump to navigation

Ventanas de información con imágenes en Google Maps Septiembre 23, 2009

Publicado por lineadecodigo en : Google , Hasta ahora 1 comentario

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.

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

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

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),"
  2. <h3>Casa Rural Los Tejos</h1>
  3.  
  4. <img src='casarural.jpg' style='float:left;margin-right:40px;'> Distribución:
  5. <ul>
  6. <li>1 Habitación de matrimonio</li>
  7. <li>2 habitaciones dobles</li>
  8. <li>2 cuartos de baño completos</li>
  9. <li>1 aseo</li>
  10. <li>Cocina</li>
  11. <li>...</li>
  12. </ul>
  13.  
  14. ");

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. :-)

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Google Maps

Poner un icono dentro de Google Maps Junio 21, 2009

Publicado por lineadecodigo en : Google , Hasta ahora 1 comentario

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.  
    2. <div id="mapa" style="width: 400px; height: 300px;"></div>
    3.  
    4. </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.  
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Google Maps

Modificar longitud y latitud en Google Maps Enero 17, 2009

Publicado por lineadecodigo en : Google , 5 comentarios

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

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.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código

Tipos de mapas con Google Maps Enero 13, 2009

Publicado por lineadecodigo en : Google , Añadir un comenario

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:

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);
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código

Abrir una ventana de información en Google Maps Enero 22, 2008

Publicado por lineadecodigo en : Google , 5 comentarios

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:

(más...)

Generando lineas geodésicas en Google Maps Diciembre 12, 2007

Publicado por lineadecodigo en : Google , 11 comentarios

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.

(más...)