¿Como Puedo Navegar en el Mapa?

En la primera entrega de esta serie tuvimos la oportunidad de poder aprender los conceptos básicos para poder habilitar la presentación de un mapa haciendo uso del servicio de Google Maps, esto quiere decir que ya tenemos funcionando nuestro mapa en una pagina de asp.net, ahora agregaremos algunas funciones (siempre básicas) que nos permitirán poder interactuar con algunas funcionalidades expuestas por el servicio. Veamos a continuación cuales son los pasos a seguir.

Los sistemas de geoposicionamiento se basan en dos coordenadas para poder ubicar los lugares alrededor del mundo, les estoy hablando de la Latitud y la Longitud, segun wikipedia:

• La latitud mide el ángulo entre cualquier punto y el ecuador. Las lineas de la latitud se llaman paralelos y son círculos paralelos al ecuador en la superficie de la tierra
• La longitud mide el ángulo a lo largo del ecuador desde cualquier punto de la tierra.

Ahora habiendo hecho una breve introducción de estos dos conceptos procedamos a utilizar el servicio de Google Maps para poder hacer el posicionamiento de nuestro mapa en base a estas dos coordenadas.

Utilizando la página que construimos en la primera entrega, procederemos agregarle dos controles TextBox y un boton quedando definidos de esta manera:

Si vemos el codigo HTML de la imagen presenta un control de tipo Input y no estoy utilizando un asp:Button, por que?, bueno esto es por que no queremos que al hacer click al boton se haga un post back hacia el servidor, es decir vamos a manejar esta funcionalidad de lado del cliente. Ahora vamos hacer uso de algunas funciones que nos provee el API del Servicio, las cuales utilizaremos para poder obtener información de las coordenadas de posicionamiento (Latitud y Longitud), adicionalmente le proveeremos a nuestra pagina la opción para que un usuario pueda ingresar las coordenadas de posicionamiento y pueda navegar al lugar seleccionado. Veamos a continuación como quedaría modificado el código:

Como podemos observar en el Script modificado, vemos cosas nuevas. Para comprender el código iremos paso a paso revisando las modificaciones. En primer lugar vemos la utilización del metodo “addControl” este metodo nos permite mostrar controles dentro del contenedor del mapa. En este caso utilizamos esta funcion para habilitar los controles de navegación (Cuadro Verde en la imagen) y el formato de despliegue del mapa (Cuadro Amarillo en la imagen). Al momento de invocar “addControl” instanciamos dos objetos de las clases GSmallMapControl y GMapTypeControl. El siguiente punto es la forma en que estamos agregando un event listener para poder capturar un evento sobre el mapa, para esto utilizamos la clase GEvent la cual permite a través del método addListener registrar una función que se invoque al momento de generarse el evento (Esto es el concepto de un Delegate que utilizamos en .net, solo que aplicado como un prototipo en Javascript). En la función que mapea el evento, lo único que hacemos es utilizar el método “getCenter()”para obtener las coordenadas en el mapa y se las asignamos a los textboxes. Por ultimo invocamos el método “setCenter” para posicionar el mapa en una ubicación inicial. Si quieren conocer a mayor detalle las clases y métodos del api les recomiendo ver esta página: http://www.google.com/apis/maps/documentation/reference.html

¿Como hacer que el boton cambie la posicion del mapa?

Si recuerdan el boton que agregamos a la pagina tiene mapeado el evento clicked hacia una funcion llamada “ir_posicion_en_mapa()”, a continuación veamos lo que tenemos que codificar para que nuestro boton realize la navegación en base a las coordenadas geográficas ingresadas por el usuario:

En esta función obtenemos los valores de los textboxes y los guardamos en dos variables “lat” y “lng”, luego procedemos a utilizar la función “panTo” para indicarle al control del mapa hacia donde debera navegar haciendo uso de una instancia de la clase GLatLng.

Bien Amigos, esto es todo por el momento, posteriormente habilitaremos otras opciones mas llamativas y funcionales a nuestro mapa, pero esto será en la próxima entrega!, espero que les halla servido y cualquier duda o comentario pueden postearlo en la sección de comentarios de este post.

Aqui les dejo el proyecto de VS2005 actualizado: Google Maps (2da Entrega)

Saludos,

Carlos A. Lone

Etiquetas de del.icio.us: ASP.NET, ASP.net AJAX, GOogle Maps

 

Etiquetas de Technorati: ASP.net AJAX, ASP.NET, Google Maps

---

Possibly related posts: (automatically generated)

• Comprimiendo Archivos en .Net 2.0
• Administración de Equipos de Trabajo y Proyectos: “Peopleware: Productive …
• Aprendiendo a Utilizar Google Maps (Primera Entrega)
• Honduran National Resistance Update 11/9