Soluciones a medida

Como localizar tu empresa con Google Maps

Jueves, 6 Julio 2006 en Desarrollo Web, Soluciones a medida

¿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.

Tags: ,
Realizado por admin | No Comments »



Gestión de Bookmarks de una oficina mediante una Intranet

Viernes, 10 Febrero 2006 en Soluciones a medida

Buscando un sistema para almacenar Bookmarks al estilo de del.icio.us hemos encontrado Sitebar. La idea consistía en compartir los bookmarks entre los integrantes de un equipo de trabajo en vez de almacenar cada uno los suyos. del.icio.us es impresionante pero no interesabe compartir con todo el mundo los bookmarks de la oficina. Por esta razón, Sitebar podía servir.

Con SiteBar podemos realizar las siguientes operaciones:

  • Disponer de los bookmarks en cualquier navegador
  • Acceso seguro y controlado en la oficina o casa
  • Exportar o Importar los Bookmarks
  • Guardar noticias y Feeds

SiteBar tiene dos formas de uso, a través del servicio ofrecido por la web my.sitebar.org y bajando la versión en php e instalandolo en nuestro servidor web. Que en este caso es la que nos interesa. En cualquiera de los dos casos tiene la posibilidad de integrarse en navegadores como Firefox, Internet Explorer y Opera. Resultando muy sencillo poder añadir nuevos bookmarks desde nuestro navegador favorito.

La instalación en un servidor web es bastante sencilla. En cada puesto cliente es necesario instalar y configurar las extensiones para facilitar la labor de elegir, añadir o eliminar bookmarks.

Tags:
Realizado por admin | No Comments »



Servicios Ofrecidos

Enlaces Generales