Ver
la ubicación de un elemento, digamos una zona determinada, inmueble o fenómeno,
representado en un mapa le brinda al usuario una mejor idea o sentido de localización.
Por lo que es común encontrar este tipo de componentes en las aplicaciones webs
con el fin de representar una ubicación o dirección. Todo esto y más mediante
la Aplication Program Interface (API) de google, para el manejo de imágenes
satelitales, coordenadas y datos geo-referenciados.
Para
la explicación del montaje y configuración de este componente nos apoyaremos en
los pasos seguidos para la incorporación del mismo en uno de los productos
desarrollados por SoftPei. Bueno primero lo primero, hay que cargar el API de
google en nuestra aplicación, recomiendo a la hora de hacer esto, colocar este
segmento del código donde se carga el API en algún lugar de la aplicación que
no se recargue constantemente, ya que en zonas con conexiones a internet lentas
afectaría el rendimiento de la aplicación al cargar el API reiterada e
innecesariamente. En nuestro caso este código fue colocado en 2 páginas
solamente, la inserción y edición de uno de los elementos en una aplicación hecha
con Codeigniter:
Fig.
1. Cargar el API de google.
Una
vez cargado el API, ya podemos comenzar el trabajo de configuración del mapa y
maquetación del contenedor del mismo. En ocasiones puede verse un
comportamiento extraño en la aplicación o la aparición de errores de JavaScript
como el que se muestra en la imagen siguiente:
Fig.
2. Error relacionado a la carga del API de google.
Esto
sucede cuando se está intentando utilizar un componente que no existe o no se
ha terminado de cargar completamente, para que esto no suceda hay que
cerciorarse de que el API ha sido cargada completamente antes de comenzar a
trabajar con la misma, en el caso de la aplicación que hemos tomado como
ejemplo se procedió como sigue:
Fig.
3. Utilización del evento “done”, para evitar errores de carga con el API de
google.
El
resto del código se coloca dentro del handler de dicho evento, algunos de los
componentes que se inicializan son los que se muestran en la imagen siguiente:
Fig.
4. Algunos parámetros de la configuración del mapa de google
Una
vez especificadas las configuraciones del mapa se coloca en su componente HTML
contenedor, en este caso un div con id “ubication_map”:
Fig.
5. Etiqueta HTML contenedora del mapa de google.
Una
vez hecho esto deberá aparecer algo como esto en nuestra aplicación:
No hay comentarios:
Publicar un comentario