lunes, 17 de septiembre de 2012

API Google Maps y Visual Basic.NET. Parte I. Buscar dirección

Hoy vamos a ver cómo manejar desde Visual Basic el API de Google Maps. En esta primera entrada realmente no vamos a utilizar el API de Google Maps, sino que vamos a realizar peticiones a través de URL con el control WebBrowser.
Lo primero que vamos a ver es cómo se hacen peticiones de direcciones a través de URL con Google Maps:
http://maps.google.es/maps?q=direccionAbuscar
Ejemplificando
http://maps.google.es/maps?q=Madrid+puerta+del+sol


Como podemos observar, simplemente hay que poner "http://maps.google.es/maps?q=" seguido de la dirección separada por símbolos de más ("+").
Vamos a utilizar esta forma tan sencilla para crear una aplicación en Visual Basic que nos muestre un mapa a partir de una dirección. Para ello creamos un nuevo proyecto en el que añadimos un Label, un TextBox (denominado txtdireccion), un Button y un WebBrowser:


Hacemos doble clic sobre el botón e incluimos el siguiente código:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

 'Creamos variable para almacenar la url
Dim urlMaps As String
'Concatenamos la dirección con el Textbox
urlMaps = "http://maps.google.es/maps?q=" & txtdireccion.Text
'Creamos una variable direccion para que el WebBrowser lo pueda abrir puesto que no puede abrir directamente un string
Dim direccion As New Uri(urlMaps)
'ASignamos como URL la direccion
WebBrowser1.Url = direccion

End Sub


Y vemos el resultado:


Como podemos observar, se muestra el resultado de nuestra búsqueda y, además del mapa, el cuadro de búsqueda, y los puntos reseñables en la parte de la izquierda. Esto no queda demasiado elegante, lo ideal sería mostrar el mapa a pantalla completa. Para ello, simplemente al final de la URL debemos añadir &output=embed, es decir:
http://maps.google.es/maps?q=direccionAbuscar&output=embed
Ejemplificando
http://maps.google.es/maps?q=Madrid+puerta+del+sol&output=embed
El código quedaría así:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

'Creamos variable para almacenar la url
Dim urlMaps As String
'Concatenamos la dirección con el Textbox añadimos la última sentencia para indicar que sólo se muestre el mapa
urlMaps = "http://maps.google.es/maps?q=" & txtdireccion.Text & "&output=embed"'Creamos una variable direccion para que el WebBrowser lo pueda abrir puesto que no puede abrir directamente un string
Dim direccion As New Uri(urlMaps)
'ASignamos como URL la direccion
WebBrowser1.Url = direccion

End Sub


El resultado lo vemos a continuación:


El último cambio que vamos a realizar es que, en vez de visualizar el mapa cuando pulsemos en el botón, vamos a ir recargando el mapa cada vez que escribamos algo en el  Texbox . Para ello debemos usar el evento TextChanged del Texbox, que se ejecute cada vez que se modificar el valor del Texbox, es decir, cada vez que pongamos un nuevo carácter en el cuadro de texto (Texbox), se va a ejecutar.
Únicamente debemos eliminar el botón del formulario y su código asociado. Para asignar el evento TextChanged sólo hay que hacer doble clic sobre el Textbox. El código es el siguiente:

Private Sub txtdireccion_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles txtdireccion.TextChanged

'Creamos variable para almacenar la url
Dim urlMaps As String
'Concatenamos la dirección con el Textbox añadimos la última sentencia para indicar que sólo se muestre el mapa
urlMaps = "http://maps.google.es/maps?q=" & txtdireccion.Text & "&output=embed"
'Creamos una variable direccion para que el WebBrowser lo pueda abrir puesto que no puede abrir directamente un string
Dim direccion As New Uri(urlMaps)
'ASignamos como URL la direccion
WebBrowser1.Url = direccion
End Sub


Y ahora cada vez que escribamos algo en el cuadro de texto se va a ir actualizando de forma automática.
Os dejo un enlace interesante sobre el API de Google Maps, https://developers.google.com/maps/?hl=es-AR.
Descarga el código fuente aquí.

15 comentarios:

  1. por fin un tutorial que si me explica gracias!! saludos desde rd

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario ;)
      Casi todo lo que se puede hacer con el api de google maps y visual basic está implementado en la aplicación que se puede descargar desde aquí http://algoimagen.blogspot.com.es/2013/02/api-google-maps-y-visual-basicnet-parte.html
      Si tenéis interés en algo en concreto con el api de google maps o tenéis alguna duda con alguna de las partes (I, II, III, IV), comentarlo y si puedo os ayudo!
      Gracias y un saludo

      Eliminar
  2. Estimado que interesante tu aporte, te pasaste estudiar las APIS, tenia un desarrollo parecido en Visual basic 6.0, me imagino que migrar a NET la programacion no cambia mucho

    ResponderEliminar
  3. Hola, me gustaría saber cómo puedo extraer el perfil de elevacion entre dos puntos de google earth y dibujarlo usando Visual basic 6. Es decir, no quiero la imagen, quiero extraer los puntos de elevación y dibujarlo yo mismo, ya que luego sobre esto necesito dibujar otras cosas.
    Saludos

    ResponderEliminar
  4. Genial!! lo estaba buscando, Gracias por el Aporte

    ResponderEliminar
  5. Me ayudo mucho .GRACIAS,,,Saludos desde Peru

    ResponderEliminar
  6. No puedo navegar, no marca el sitio y me da el siguiente error
    error de script en esta página
    linea 720
    caracter 172
    código 0
    URL: https://maps.google.com.py/mapfiles/home3.html

    ResponderEliminar
    Respuestas
    1. Me ocurre exactamente lo mismo.
      ¿Alguna solución?

      Muchas gracias.

      Eliminar
    2. Antes me funcionaba. Ahora mismo error...

      Eliminar
  7. En el primer mapa que se muestra se observa varias referencia (puntos) ¿como se puede hacer ? para poder visualizar simultaneamente varios puntos en el mismo mapa.

    ResponderEliminar
  8. me gustaria hacer un mapa y que este contenga varios semaforos. que puedan prender y apagar localizados con latitud y longitud.. alguien me puede ayudar janero89@hotmail.com

    ResponderEliminar
  9. Gracias por la ayuda, me puedes indicar porque me manda el siguiente mensaje al probar tu ejemplo? "The Google Maps Embed API must be used in an iframe".

    ResponderEliminar
  10. a mi tambien me sale lo de The Google Maps Embed API must be used in an iframe.
    creo que es devido a una actualizacion de google maps.
    intentare buscar la solucion, pero si alguien me puede ayudar se lo agradeceria jeje :)

    ResponderEliminar