Inicio > Tech - Application Development > ADF tips: Método rápido y sencillo para incorporar Google Maps a nuestra aplicación

ADF tips: Método rápido y sencillo para incorporar Google Maps a nuestra aplicación

Todos sabemos que la mejor forma de localizar una dirección es acceder mediante nuestro navegador a https://maps.google.es/  y teclear el nombre de la vía y de la localidad.

Google proporciona un servicio gratuito (disponible para cualquier sitio web que sea a su vez gratuito para el consumidor) para acceder a sus mapas, haciendo uso de la versión 3 de su API JavaScript.

Google Maps

Google Maps en una aplicación ADF

Os voy a mostrar como podéis usar esta API desde una página JSF. En unos pocos pasos conseguiremos una aplicación que nos permitirá, a partir de los atributos dirección y población de una tabla en pantalla y mediante la pulsación de un botón de comando, lanzar un pop-up,  donde ver la localización exacta del lugar.

El diseño de la página es bien simple, modular y reutilizable. Colocamos dentro de la página un ‘page fragment’ para la tabla y otro distinto que agrupe el botón de llamada  junto a un pop-up.

Este segundo pop-up contiene un taskflow con dos parámetros (dirección y localidad). Diseñando de esta manera conseguimos un ‘plugin’ para visualizar mapas totalmente desacoplado del resto de componentes y 100% reutilizable.

A continuación os muestro el código JavaScript , concretamente el ‘page fragment’ donde se muestra el mapa (visorMapa.jsff).

JS Goggle Maps

Código Javascript para utilizar la API de Google Maps

Y aquí tenemos los componentes ADF  de ‘visorMapa.jsff’  que permiten enlazar la capa JSF con JavaScript, con el fin de poder mostrar el mapa:

Componentes de la capa JSF

Componentes de la capa JSF para presentar Google Maps

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: