Posted by: carloslone | October 29, 2007

Aprendiendo a Utilizar Google Maps (Segunda Entrega)

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.

¿Como Puedo Navegar en el Mapa?

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:

Codigo HTML de Pagina

Pagina con TextBox y Botones (Click para ampliar imagen)

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:

Script Modificado (Click Para Ampliar Imagen) Mapa Guatemala (Click para ampliar la imagen)

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:

Script para posicionar el mapa

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: , ,

 

Etiquetas de Technorati: , ,

About these ads

Responses

  1. [...] entrega del articulo "Aprendiendo a utilizar Google Maps" pueden siempre ver la primer y segunda [...]

  2. hola estimado Carlos, estoy comenzando a hacer una aplicacion en .net utilizando googlemap y encontre tu blog que me parece fantastico, muchas gracias por compartir tus conociemientos!

    mi pregunta es, si tenes realizada la tercera entrega de los articulos que escribiste sobre googlemap,

    saludos desde Rosario, Argentina

    Cristian

    • Cristian,

      Respecto a tu pregunta, deje pendiente la entrega del último artículo, sin embargo ya lo tengo en el horno solo para publicarlo. Voy a retormarlo y publicarlo pronto.

      Saludos,

      Carlos A. Lone

  3. Muchisimas Gracias!

    saludos,

    Cristian.-


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: