feed twitter facebook LinkedIn facebook

Google » Añadir control de trafico con Google Maps

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

Una de las cosas que nos ofrece Gogle Maps es información del tráfico de ciertas ciudades, indicando qué vias son más lentas y cuales más rápidas. Para ello utiliza el típico código de colores verde a rojo.

A parte de esto ofrece otras carácterísticas como puntos en los cuales hay accidentes, conocer el tráfico en un día y hora en concreto. Si bien, estas dos carácterísticas no están accesibles vía API (de momento) de Gogle Maps.

Añadir el tráfico a nuestro mapa será tan sencillo como superponer una capa al mapa. La capa que refleja el tráfico es GTrafficOverlay. Su creación será de la siguiente forma:

  1.  
  2. new GTrafficOverlay();
  3.  

Para añadir capas al mapa tenemos el método addOverlay() sobre la clase GMap2. Por lo cual añadir la capa de tráfico quedará de la siguiente forma:

  1. map.addOverlay(new GTrafficOverlay());

Solo nos habrá quedado cargar inicialmente el mapa y posicionarlo en una ciudad de la cual Google nos pueda dar información de tráfico. En nuestro caso hemos elegido Seattle.

  1.  
  2. if (GBrowserIsCompatible()) {
  3. var map = new GMap2(document.getElementById("mapa"));
  4. map.setCenter(new GLatLng(47.645962,-122.236633), 10);
  5.  
  6. map.addOverlay(new GTrafficOverlay());
  7. }

Google » Drag Zoom Control con Google Maps

Una de las novedades del Google Maps API Utility Library Open Source es el Drag Zoom Control desarrollada por Andre Lewis.

Continue reading Drag Zoom Control con Google Maps...

Google » Incluir imagenes en Google Maps

junio 6, 2007 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Si ya hemos aprendido a "Cargar Google Maps" en nuestra página web. Veremos que nos empiezan a aparecer nuevas necesidades para crear nuestros Mashup.

Continue reading Incluir imagenes en Google Maps...

Google, JavaScript » Añadiendo controles a Google Maps

Una vez que ya hemos puesto nuestro mapa en la web queremos añadirle nuevas funcionalidades. Una de las funcionalidades básicas es el poder realizar un zoom o el poder cambiar el mapa al formato satélite o viceversa.

Continue reading Añadiendo controles a 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