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í.

28 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
  11. Lo mismo "The Google Maps Embed API must be used in an iframe."

    ResponderEliminar
  12. A mi también me sale éste error, alguien sabe el por que?

    ResponderEliminar
  13. Saludos,
    yo tenia el mismo problema anoche con el mensaje de: "The Google Maps Embed API must be used in an iframe." pero ya lo resolví hoy en la mañana.

    Comente la siguiente linea en el metodo / funcion Button1_Click de la clase Direccion
    'navegador.Url = direccion

    y agregue la siguiente linea justo debajo de la anterior
    navegador.DocumentText = "< html >< body style='margin:0px; padding:0px;'>< iframe src='" & direccionString & "' name='ifrBrowser' frameborder='0' widht='100%' height='100%'>"

    Ahora solo me faltaría hacer lo mismo en el resto de las llamadas directas al webbrowser pero en realidad estoy haciendo otra aplicación desde cero mas sencilla que esta. Tu trabajo Luis me va a ayudar muchísimo!! Gracias :D

    PD: Al principio estaba confundido por que no encontraba como generar el API Key, después de haberlo generado me seguía dando el mismo error arriba mencionado por lo que fui a dar con activar el servicio de Google Maps Embeded API, pero aun así todavía me faltaba activar el servicio de Places API. Y ya por ultimo resolver el problema del iframe mencionado.
    Saludos a todos y hasta pronto.

    ResponderEliminar
    Respuestas
    1. navegador.DocumentText = "< html >< body style='margin:0px; padding:0px;'>< iframe src='" & direccionString & "' name='ifrBrowser' frameborder='0' widht='100%' height='100%'>" me da un error. "el operardor & no esta definido para string o system.uri"

      Eliminar
  14. alguien soluciono esto realmente "The Google Maps Embed API must be used in an iframe."

    ResponderEliminar
    Respuestas
    1. Revisa el comentario anterior, con eso se soluciona.
      De todas maneras subiré una entrada con la solución.
      Un saludo

      Eliminar
    2. eso mismo probe, pero me da error "direccionString " en eso....

      Eliminar
    3. este es el error "el operardor & no esta definido para string o system.uri"

      Eliminar
  15. alguien soluciono esto realmente "The Google Maps Embed API must be used in an iframe." porfa porfa porfa porfa.

    ResponderEliminar
  16. alguien que pueda ayuder porfa lo necesito urgente...."The Google Maps Embed API must be used in an iframe." la solucion que dieron mas arriba no funciona .. o falta una linea de codigo.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo.
      Primero, esto no es un foro, es un blog.
      Segundo, no por insistir más, se va a resolver antes.
      Tercero, el problema está resuelto en el comentario que te indiqué, lo que pasa que hay que tener conocimientos, no es un copia pega y funciona.
      Como dije antes, en cuanto tenga un hueco, subo una entrada explicando el proceso paso a paso.
      Un saludo ;)

      Eliminar
    2. acuerdese porfa de este anonimo.
      aun necesito solucionar ese inconveniente.

      Eliminar
  17. La solucion es tan simple solo quita "&output=embed"

    ResponderEliminar