Cómo tener Google Maps en tu web

Gracias a Google Maps, tendremos el control de este sistema de posicionamiento geográfico y podremos localizar puntos específicos en nuestro mapa, crear itinerarios, ampliar una zona determinada y un sinfín de cosas más. Desvelamos algunos de sus secretos

Redacción

Cómo tener Google Maps en tu web

24 octubre 2007

Paso 1

Introducción

En estas páginas, repasaremos algunas de las funciones más básicas que nos ayudarán a entrar en contacto con esta API, al margen de recordar algunas pequeñas nociones de programación y administración de nuestro sitio web. Para ello, hemos optado por un escenario en el que dispondremos de un equipo en el que se ha instalado Windows 2003 Server, el servidor de páginas web que viene incorporado con el mismo, Internet Information Server, y el motor de bases de datos relacionales Microsoft SQL Server 2000, gracias al cual dotaremos de dinamismo a nuestro sitio web.
Así mismo, hemos introducido una pequeña parte de programación en cliente y en servidor. Del lado del cliente, hemos utilizado JavaScript, que es el lenguaje nativo que va a soportar esta API; para el servidor, utilizamos la plataforma ASP, con Visual Basic Script. Éste es solamente uno de los muchos escenarios que se pueden plantear. Dejamos la labor de portar este mismo ejemplo a cualquier otra configuración al lector inquieto e interesado en este tema.

Para terminar de redondear el ejemplo, debemos introducir la motivación inicial necesaria para elaborarlo. Supongamos que estamos realizando un viaje y queremos montar una página web en la que iremos mostrando a todos nuestros familiares y amigos los sitios que vamos visitando. Sigue leyendo y descubre cómo empezar a trabajar con Google Maps. Los límites sólo los pondrá tu imaginación.

Paso 2

Consigue tu clave

Antes de meternos en harina, es preciso aclarar un par de cosas importantes. En primer lugar, será estrictamente necesario disponer de un usuario de Google, que conseguiremos por ejemplo dándonos de alta en su servicio de correo electrónico (www.gmail.com). Una vez dispongamos de este requisito, será imprescindible acudir a la página oficial relacionada con la API de Google Maps. Para ello, teclea www.google.com/apis/maps/signup.html en tu navegador, lee atentamente el contrato y seguidamente acepta los términos del mismo introduciendo la URL del sitio web donde vas a incorporar dicha API. Esto es muy importante porque, en teoría, este directorio web será desde el único sitio desde donde podrá funcionar de manera correcta la misma. Finalmente, procede a generar la clave, que será mostrada en pantalla tras pulsar el botón correspondiente. Es necesario que la copies y la pegues en algún documento para no perderla y tenerla siempre presente.

Paso 3

Prepara tu servidor

Comenzaremos preparando el servidor. Establece en el disco duro la estructura de carpetas necesaria para dar soporte al sitio web. Define una carpeta general con el nombre pgm, por ejemplo, y, dentro de ella, las carpetas js (en las que incluiremos los módulos JavaScript), html (que contendrán las páginas web estáticas), prg (para las páginas dinámicas con código Visual Basic Script incrustado), css (la hoja de estilos utilizada) e img (imágenes). A continuación, ejecuta Internet Information Server y procede a crear un directorio virtual que apuntará directamente al directorio físico pgm.

Es necesario que, como página de inicio, configuremos default.htm en la pestaña de Documentos. Esta página simplemente guiará al usuario hacia pgm_ini.asp, verdadero núcleo del práctico. Lo último que debes hacer es cerciorarte de que el servidor va a ser capaz de interpretar y ejecutar código Visual Basic Script. Para ello, dirígete a Extensiones de servicio Web, donde las opciones Páginas Active Server y ASP.NET deberán estar permitidas.

Paso 4

La base de datos

Es el momento de definir la estructura que va a tener la base de datos que albergará la información de nuestro sistema. En este sencillo ejemplo, crea una base de datos llamada pgm y, dentro de la misma, una tabla que podrás llamar PGM_PUN. Los atributos que forman parte de la misma serán: PUN_ID (identificador), PUN_NOM (nombre del punto geográfico), PUN_LAT (latitud del punto), PUN_LON (longitud del punto), PUN_INF (información del punto) y PUN_URL (dirección relativa de la página web donde se encuentran las fotos de ese punto) y utiliza los tipos de datos que puedes ver en la foto.
Te ofrecemos otra pista adicional: para sacar las coordenadas de un punto determinado (latitud y longitud), nosotros simplemente hemos utilizado Google Earth. Junto con la base de datos, hemos creado un usuario SQL para acceder vía web a la misma. Defínelo en Inicios de sesión y nómbralo como pgmweb, con contraseña pgmweb también. Asígnale por defecto la base de datos pgm. Es importante que no olvides conceder permisos de selección a ese usuario para la tabla PGM_PUN. Para ello, marca la casilla SELECT que aparece al pinchar en Usuarios, selecciona pgmweb y pulsa el botón Permisos en su pestaña de Propiedades.

Paso 5

Creación de un ODBC

Para poder establecer una conexión entre la base de datos recién creada y el código Visual Basic Script ejecutado en la página web de nuestro servidor, es necesario definir un ODBC. Pulsa Incio/Panel de Control/Herramientas administrativas/Orígenes de datos (ODBC). Visualiza la pestaña DSN del Sistema y pincha en Agregar. Selecciona el controlador etiquetado como SQL Server y disponte a introducir un nombre (utiliza pgmweb) y un servidor (local). En la siguiente pantalla, selecciona la autenticación de SQL Server y, como Id. de Inicio de Sesión y contraseña, deberás poner la del usuario creado en el paso anterior. Pincha en Siguiente y completa el proceso de registro eligiendo como base de datos asociada pgm.

Paso 6

Cosas a tener en cuenta

A la hora de programar una página web, es necesario establecer una serie de requisitos que van a facilitar su visualización por parte de los usuarios. Uno de estos detalles importantes es que definas la página que contiene el mapa como si fuese un documento XHTML para evitar posibles errores a la hora de trabajar con el mismo. Otro es la utilización del juego de caracteres del idioma español para que se puedan incluir sin problemas acentos y letras especiales, como la «ñ». En este caso, elige la codificación ISO Europeo Occidental.

Finalmente, establece una referencia a la hoja de estilos definida dentro del directorio css, denominada pgm_css.css, que permitirá, entre otras cosas, visualizar los enlaces con un color resaltado azul al pasar el ratón por encima de ellos de acuerdo con la configuración que hemos establecido en este ejemplo.

Paso 7

Embebiendo el mapa

Pasemos a la parte más práctica. Comenzamos incrustando el control de Google Maps en nuestra propia página. El fichero que lo va a contener es pgm_ini.asp, incluido dentro del directorio prg. Dos cosas será necesario tener en cuenta. El primer requisito es la inclusión de una referencia obligada al módulo de JavaScript que nos proporciona Google y que contiene todos los métodos necesarios para manipular el mapa y sus objetos relacionados. Aquí será necesario incluir, en forma de parámetro basado en la URL, la clave que obtuvimos en el primer paso cuando nos registrarnos para poder utilizar la API.

La segunda exigencia es la invocación de la función que añade el control en nuestra página web. Para conseguir esto, incluye en el evento de carga de la página web onload la llamada a la función load (longitud, latitud). Esta función se encargará de gestionar la carga del mapa en pantalla. Crea el objeto map y posteriormente centra el mapa en el punto que desees.

Nosotros hemos utilizado un conjunto de variables globales como zoom, que permitirá, en este caso, establecer el nivel de acercamiento al punto seleccionado en primera instancia. El objeto map será necesario establecerlo dentro de una sección delimitada mediante la etiqueta. La definición de su tamaño establecerá las medidas exactas de nuestro mapa inicialmente. Para terminar, recuerda liberar todos los recursos utilizados por el control de Google al cerrar la página web asociando la función de destrucción GUnload() al evento onunload.

Paso 8

Consulta los puntos geográficos

Es hora de afrontar el código Visual Basic Script sito en pgm_ini.asp. En primer lugar, vamos a dedicar una porción del mismo a definir las variables que se van a utilizar. Destacan, entre otras, aquellas que van a albergar el contenido de los atributos de la tabla PGM_PUN y que, por ello, hemos nombrado de la misma manera. Otras dos variables más van a ser de esencial ayuda: comd y coms, que utilizaremos para almacenar respectivamente los caracteres comillas dobles y comillas simples, muy útiles a la hora de imprimir las etiquetas HTML combinadas con las llamadas a función en JavaScript.

Seguidamente, establece la conexión con el ODBC creado en un paso anterior. Construye la consulta SQL que va a darte los puntos geográficos de la base de datos y, finalmente, para cada punto de la tabla, imprime en la página web el enlace, que posteriormente podremos visualizar utilizando para ello un bucle Do While. Sólo resta proceder a la destrucción de los objetos con y res para liberar estos recursos en el servidor.

Paso 9

Marca los puntos en el mapa

Para mantener una claridad aceptable dentro del código de la página web, es conveniente establecer una función específica que se encargue de situar las marcas de los puntos geográficos en el mapa. Es por esto que se ha definido situarMarcador (latitud, longitud, info, url). Los parámetros de entrada latitud y longitud establecerán las coordenadas geográficas del punto que se quiere mostrar. Por otro lado, info contendrá una cadena de caracteres con la información de la ciudad a la que se hace referencia. Finalmente, se ha contemplado un último parámetro, url, que será el enlace directo a la página a través de la cual podremos ver las fotos en pantalla. En primer lugar, comprueba la existencia de algún marcador utilizando para ello la variable booleana hayMarcador. En caso de que sea así, será necesario invocar el método removeOverlay para eliminarlo.

El siguiente paso es borrar otras posibles capas que hayan podido quedar superpuestas en el mapa. Esto podría suceder con las etiquetas asociadas a cada marcador. Seguidamente, crea un nuevo punto geográfico y el objeto marcador relacionado con el mismo, así como sus etiquetas pertinentes. Recuerda que, en la primera de ellas, se almacenará la información y, en la otra, la URL con las fotografías. Para finalizar, añade la visualización de las etiquetas al producirse un clic del ratón sobre el marcador e imprime en pantalla el mismo, registrando su aparición en la variable global anteriormente descrita hayMarcador.

Paso 10

Más información

Hasta aquí, sólo un pequeño acercamiento a lo que es la API de Google Maps. Como puedes ver en este ejemplo, se han utilizado unos pocos métodos y clases de los que hay disponibles para elaborar esta web de viajes. Sólo resta ofrecerte este enlace www.google.es/apis/maps/documentation para que puedas estudiar en profundidad todos sus entresijos y sacarle el máximo rendimiento posible. En ella encontrarás una gran cantidad de ejemplos que podrán ayudarte, así como una extensa documentación sobre las clases implementadas en la API y sus métodos relacionados.