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:
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í:
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:
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í.
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í.
por fin un tutorial que si me explica gracias!! saludos desde rd
ResponderEliminarGracias por tu comentario ;)
EliminarCasi 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
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
ResponderEliminarHola, 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.
ResponderEliminarSaludos
Luis, excelente aporte, me ha servido mucho
ResponderEliminarGenial!! lo estaba buscando, Gracias por el Aporte
ResponderEliminarMe ayudo mucho .GRACIAS,,,Saludos desde Peru
ResponderEliminarNo puedo navegar, no marca el sitio y me da el siguiente error
ResponderEliminarerror de script en esta página
linea 720
caracter 172
código 0
URL: https://maps.google.com.py/mapfiles/home3.html
Me ocurre exactamente lo mismo.
Eliminar¿Alguna solución?
Muchas gracias.
Antes me funcionaba. Ahora mismo error...
EliminarEn 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.
ResponderEliminarme 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
ResponderEliminarGracias!!
ResponderEliminarGracias 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".
ResponderEliminara mi tambien me sale lo de The Google Maps Embed API must be used in an iframe.
ResponderEliminarcreo que es devido a una actualizacion de google maps.
intentare buscar la solucion, pero si alguien me puede ayudar se lo agradeceria jeje :)
Lo mismo "The Google Maps Embed API must be used in an iframe."
ResponderEliminarA mi también me sale éste error, alguien sabe el por que?
ResponderEliminarSaludos,
ResponderEliminaryo 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.
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"
Eliminaralguien soluciono esto realmente "The Google Maps Embed API must be used in an iframe."
ResponderEliminarRevisa el comentario anterior, con eso se soluciona.
EliminarDe todas maneras subiré una entrada con la solución.
Un saludo
eso mismo probe, pero me da error "direccionString " en eso....
Eliminareste es el error "el operardor & no esta definido para string o system.uri"
Eliminaralguien soluciono esto realmente "The Google Maps Embed API must be used in an iframe." porfa porfa porfa porfa.
ResponderEliminaralguien 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.
ResponderEliminarHola de nuevo.
EliminarPrimero, 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 ;)
acuerdese porfa de este anonimo.
Eliminaraun necesito solucionar ese inconveniente.
La solucion es tan simple solo quita "&output=embed"
ResponderEliminarBuenas noches, soy nuevo con los mapas y con el primer ejercicio no me carga el mapa, me aparece en vez del mapa el siguiente mensaje:
ResponderEliminarParece que el navegador que utilizas no es compatible con Maps
Los navegadores obsoletos pueden suponer un riesgo para tu seguridad, son lentos y no funcionan con las funciones más recientes de Google Maps. Para acceder a Google Maps, debes actualizar tu equipo a un navegador moderno.
¿Sabran como solucionarlo?, de antemano les agradezco,
Este comentario ha sido eliminado por el autor.
EliminarHola. Me funcionó esto:
Eliminarhttp://www.devhut.net/2013/10/18/webbrowser-activex-control-google-maps-invalid-character-scripting-error/