Integrando Google Maps con nuestro HTML
6 Comentarios | Publicado por Cristian el 6 de Febrero de 2008
En el post anterior contábamos cómo habíamos resuelto la ubicación de sucursales del Banco Edwards Citi con Google Maps y un poco de AJAX. Dicha integración a pesar de lo simple que resulta para el usuario, fue nuestra primera experiencia utilizando Google Maps para un proyecto coorporativo.
Creemos firmemente que la integración de los servicios Web marca las pautas del desarrollo Web actual, y éste resultó un claro ejemplo de cómo integrar un servicio gratuito, disponible para todo el mundo adaptándolo a las necesidades del cliente dentro de nuestro propio desarrollo.
Técnicamente lo único que necesitamos fue una cuenta de Gmail para personalizar los mapas y guardarlos en nuestras preferencias de Google Maps.
Luego se realizó un minucioso proceso de buscar cada sucursal dentro de Google Maps, y comparar su ubicación con MapCity que es un referente local. Cada una de estas búsquedas se guardaban y se agrupaban por comunas. Una vez definidos los mapas dentro de Google Maps éstos se hacen públicos para que cualquier persona que entre directamente al sitio de Google Maps y busque por Banco Edwards se desplieguen las sucursales con los mapas previamente creados y guardados.
La inteligencia de la integración fue disponer las sucursales dentro de tablas, que ocupando una librería javascript despliega cada uno de los mapas en un iframe. Estos mapas son llamados mediante id’s a un javascript que contiene las ubicaciones guardadas y personalizadas en Google Maps.
A esto hay que sumar que en AyerViernes trabajamos con HIJAX, que es la denominación que distingue al AJAX accesible. Por ende si el navegador no dispone de javaScript, o lo tiene desactivado, el contenido se despliega en una página independiente de cada sucursal, con una imagen del mapa en ella.
Como dato aparte, las librerias de javascript que usamos en AyerViernes suelen ser las ya clásicas Prototype, Scriptaculous. Pero en el caso del sitio del Banco Edwards Citi una vez que el sitio estaba prácticamente terminado tuvimos que cambiar todo a jQuery porque, para este efecto, era sólo eso lo que necesitábamos y el cambio reducia considerablemente el peso del sitio.
Sin embargo, este cambio fue transparente y no afectó en nada al desarrollo anterior, ya que nuestro XHTML no tiene nada de javascript, sólo usamos id’s para conectar con las librerias.
Archivado en: Investigación y Desarrollo, Accesibilidad, Ajax