Como localizar tu empresa con Google Maps

Jueves, 6 Julio 2006

¿Quién no conoce Google Maps hoy en día? Un servidor Web que ofrece mapas desplazables, ampliables y personalizables, compuestos tanto por imágenes de callejeros como por imágenes de satelite.

Se trata de una tecnología que ha calado hondo en internet y que, entre otras cosas, permite su uso de manera completamente gratuita en todo tipo de Webs, incluidas las comerciales, siempre y cuando el acceso a la página donde se muestra sea gratuito.

Una de las ventajas que Google Maps ofrece al entorno empresarial es que la localización mediante esta tecnología permite la inclusión de iconos personalizados para la identificación de la empresa en el mapa, de manera que el propio logo puede indicar la localización exacta de la empresa y no romper así con la imagen corporativa.

Este tipo de mapa es realmente facil de manipular, por lo que expondremos como ejemplo lo que hemos hecho para nuestra Web:

  1. Para utilizar Google Maps, lo primero que hay que hacer es crear una cuenta en Google (con una cuenta de Gmail también nos vale)
  2. Una vez obtenida la cuenta, necesitaremos pedir una clave (key), que nos permita utilizar el API de Google Maps desde nuestro dominio. Necesitaremos una clave distinta para cada dominio donde vayamos a insertar el mapa.Una vez tengamos la clave, el uso del API para crear un mapa con la localización de nuestra empresa es relativamente sencillo:
  3. Creamos un documento HTML con sus partes fundamentales: 
    <html>
<head>
<title>Ejemplo Mapa Abartia</title>

</head>
<body>
<h1>Localización de Abartia</h1>
</body>
</html>
  4. Añadimos la llamada al API de Google, mediante una etiqueta <script> dentro del campo <head> de la web. En el parametro key de la URL, se deberá introducir la clave facilitada. Por ejemplo, para el dominio www.abartiateam.com esta será: ABQIAAAAOZ___lY-aPqjpyQwGsqqVRTgWyDm2t_NAnmiqOBiWP0tgX-Y9BQ0tr2Kd9p2zS-cFD68A_UMMtfGxg 
    <head>
[...]
<script xsrc='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOZ___l…‘
type=’text/javascript’></script>
[…]
</head>
  5. Añadimos las funciones load() y GUnload() a los eventos onload y onunload de la etiqueta <body> respectivamente para que se muestre el mapa una vez cargada la página. 
    <body onload='load()' onunload='GUnload()'>
  6. Dentro del cuerpo de la página, añadimos la capa (div) donde se mostrará el mapa, indicando también su anchura, altura y margenes. Es importante añadir un identificador para el div. En este caso lo identificaremos como “map”. 
    <div id='map' class='mapa' style='width: 44em; height: 35em; margin: 0.5em auto;'></div>
  7. Una vez preparada la página, se debe añadir un script a la sección <head> donde configuraremos los atributos del mapa (coordenadas, iconos, texto a mostrar, etc.). En el caso de Abartia Team, el script es el siguiente: 
    <script type='text/javascript'>

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

var icon = new GIcon();
icon.image = 'logo_abartia.gif';
icon.shadow = 'map_shadow.png';
icon.iconSize = new GSize(105, 42);
icon.shadowSize = new GSize(101, 30);
icon.iconAnchor = new GPoint(0, 30);
icon.infoWindowAnchor = new GPoint(0,20);

var direccion = "
<address>
Avenida Enekuri 4, Entreplanta Dcha, Dcha<br />
48014 - Bilbao<br />
Bizkaia<br />
Tel: +34 94 475 88 16<br />

Fax: +34 94 475 96 45<br />
E-mail: <a xhref='mailto:info@abartiateam.com'>info@abartiateam.com</a><br />
</address>";
var marcador = new GMarker(new GLatLng(43.272253,-2.947941), icon);
GEvent.addListener(marcador, 'click', function(){marcador.openInfoWindowHtml(direccion);});
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(43.272253,-2.947941), 15);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(marcador);
marcador.openInfoWindowHtml(direccion);

}
}

//]]>
</script>

    A continuación trataremos de explicar el script parte a parte:

    1. Lo primero que se hace en la función load es comprobar si el navegador es compatible con el API de Google Maps: 
      if (GBrowserIsCompatible()) {
    2. Se configuran los iconos y sus posiciones en el mapa: 
      var icon = new GIcon();
icon.image = 'logo_abartia.gif';
icon.shadow = 'map_shadow.png';
icon.iconSize = new GSize(105, 42);
icon.shadowSize = new GSize(101, 30);
icon.iconAnchor = new GPoint(0, 30);
icon.infoWindowAnchor = new GPoint(0,20);
    3. Creamos una variable con la dirección o texto que nos interese mostrar en el bocadillo. Se permiten etiquetas HTML :) 
      var direccion = "
<address>
Avenida Enekuri 4, Entreplanta Dcha, Dcha<br />
48014 - Bilbao<br />

Bizkaia<br />
Tel: +34 94 475 88 16<br />
Fax: +34 94 475 96 45<br />
E-mail: <a xhref='mailto:info@abartiateam.com'>info@abartiateam.com</a><br />
</address>";
    4. Configuramos un marcador para la coordenada que deseamos, y le añadimos el evento “click” para que al pulsar sobre él se muestre un bocadillo con la información descrita en el paso anterior. 
      var marcador = new GMarker(new GLatLng(43.272253,-2.947941), icon);
GEvent.addListener(marcador, 'click', function(){marcador.openInfoWindowHtml(direccion);});
    5. Añadimos un mapa dentro del elemento que identificamos anteriormente con el nombre ‘map’, lo centramos en las coordenadas que nos interesan, y lo configuramos con un nivel de zoom de 15.Indicamos que el tipo de mapa es el callejero (G_NORMAL_MAP), aunque también existen las opciones de foto de satelite (G_SATELLITE_MAP) e híbrido (G_HYBRID_MAP)

      Añadimos los controles de zoom y movimiento (addControl).

      Insertamos el marcador en el mapa, y hacemos que se muestre el bocadillo al iniciar la página.

      var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(43.272253,-2.947941), 15);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(marcador);
marcador.openInfoWindowHtml(direccion);

En caso de ser una empresa con más de una delegación, es posible mostrar todas las delegaciones en un mismo mapa, aunque solo se puede mostrar un bocadillo en cada momento, por lo que probablemente la mejor opción sea no mostrar ninguno al principio y desplegarlos al hacer click sobre cualquiera de las delegaciones, como hacen por ejemplo en la Web de la Autoescuela Galdakao, aunque eso queda a elección del autor.

Por último recomendar el paso por la página oficial del API de Google Maps para comprobar todo lo que se puede hacer con esta magnífica herramienta.

Entorno de desarrollo: Eclipse

Martes, 4 Julio 2006

Eclipse es una comunidad cuyo fin es elaborar una plataforma de desarrollo de software. Recientemente se ha publicado la versión 3.2. La cantidad y velocidad de desarrollo de distintos plugins hacen que Eclipse sea un proyecto muy importante y que ofrece un entorno completo de desarrollo.

En AbartiaTeam hemos integrado varios plugins para el desarrollo: subclipse para la integración con Subversion, wpt para desarrollo web, y PHPEclipse para trabajo con PHP, entre otros.