Google Maps VB .NET

(1)

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:

? 1 2 3 4 5 6 7 8 9 10

PrivateSubButton1_Click(ByValsender AsSystem.Object, ByVale AsSystem.EventArgs) HandlesButton1.Click

'Creamos variable para almacenar la url DimurlMaps AsString

'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 Dimdireccion AsNewUri(urlMaps)

'ASignamos como URL la direccion WebBrowser1.Url = direccion

(2)

11 12

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

? 1 2 3 4 5 6 7 8 9 10 11

PrivateSubButton1_Click(ByValsender AsSystem.Object, ByVale AsSystem.EventArgs) HandlesButton1.Click

'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

Dimdireccion AsNewUri(urlMaps) 'ASignamos como URL la direccion WebBrowser1.Url = direccion

EndSub

(3)

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:

? 1 2 3 4 5 6 7 8 9 10 11

PrivateSubtxtdireccion_TextChanged(ByValsender AsSystem.Object, ByVale AsSystem.EventArgs) Handlestxtdireccion.TextChanged

'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"

'ASignamos como URL la direccion WebBrowser1.Url = direccion EndSub

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.

(4)

API Google Maps y Visual Basic.NET. Parte II. Buscar latitud

longitud

En la anterior entrega hemos trabajado con Google Maps a través de peticiones URL, y a partir de una dirección postal, hemos visualizado en el mapa dicha dirección. En la entrega de hoy vamos a trabajar con peticiones URL pero en vez de direcciones, directamente con latitud y longitud.

Antes de mostrar el código, vamos a ver cómo hacer peticiones URL para mostrar latitud/longitud:

http://maps.google.es/maps?q=latitud,longitud&output=embed Ejemplificando:

https://maps.google.es/maps?q=40,-3&output=embed

Como podemos observar, simplemente debemos escribir http://maps.google.es/maps?q= y el valor de la latitud y longitud (separado por comas), y al final la sentencia &output=embed para que se muestre el mapa a pantalla completa.

Vamos a retomar el proyecto anterior (lo puedes descargar aquí), y vamos a añadir dos Textbox (txtlatitud y txtlongitud), dos Labels, y un botón más.

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

? 1 2 3 4 5 6 7 8 9 10

PrivateSubButton2_Click(ByValsender AsSystem.Object, ByVale AsSystem.EventArgs) HandlesButton2.Click 'Creamos variable para almacenar la url

DimurlMaps AsString

'Comprobamos que los textbox sean números

IfIsNumeric(txtlatitud.Text) AndIsNumeric(txtlongitud.Text) Then

'Concatenamos la latitud y longitud (separada por una coma) con el resto

urlMaps = "http://maps.google.es/maps?q="& txtlatitud.Text & ","& txtlongitud.Text & "&output=embed"

'ASignamos como URL la direccion WebBrowser1.Url = direccion EndIf

(5)

11 12 13

Y el resultado es el siguiente:

Como vemos es todo muy sencillo, en la próxima entrada vamos a complicarlo un poco más y vamos a empezar a utilizar el API de Google Maps para encontrar la dirección a partir de una determinada latitud/longitud mediante peticiones xml.

Toda la información sobre el API de Google Maps aquí.

API Google Maps y Visual Basic.NET. Parte III. Codificación

geográfica

En el tutorial de hoy vamos a ver cómo obtener la latitud y longitud a partir de una determinada dirección, por ejemplo, le indicaremos a nuestra aplicación que nos muestre las coordenadas de "Puerta del Sol, Madrid" y nos mostrará las coordenadas (40.4168762,-3.7033046). A este proceso se le llama codificación geográfica, según la definición de la documentación oficial es, "el proceso de transformar direcciones (como "1600 Amphitheatre Parkway, Mountain View, CA") en coordenadas geográficas (como 37.423021 de latitud y -122.083739 de longitud), que se pueden utilizar para colocar marcadores o situar el mapa". Vamos a ver que es un poco más complejo que las partes anteriores (I y II), pero es fácilmente entendible. Primeramente explicaremos cómo hacer nuestra petición mediante un solicitud HTTP, es decir, cómo tenemos que crear nuestra URL para que nos devuelva la información. Un ejemplo sería:

http://maps.googleapis.com/maps/api/geocode/xml?address=Puerta+de+Sol,+Madrid&regio n=es&sensor=false&language=es

(6)

Con esto vemos que debemos incluir primeramente "http://maps.googleapis.com/maps/api/geocode/xml?" y después los parámetro que los vamos a explicar a continuación.

PARÁMETROS

 Address (obligatorio) (dirección): se trata de la dirección a partir de la cuál queremos obtener la latitud/longitud. Es aconsejable indicar las unidades geográficas separadas por comas (por ejemplo, "Puerta del Sol, Madrid, España") y también se debe (aunque no es obligatorio) eliminar los espacios y sustituirlos por "+". Es decir, una dirección correcta sería, Puerta+de+Sol,+Madrid,+España. Todo esto debe aparece acompañado de "address=", en resumen, quedaría: address=Puerta+de+Sol,+Madrid,+España.

 Region: este es un parámetro opcional y hace que al realizar la búsqueda dé prioridad a resultados de la región seleccionada, es decir, si buscamos la ciudad de León habiendo puesto como región España, el primer resultado será de León (España), en cambio, si ponemos como región México, nos aparece como primer resultado la ciudad de León(México). Para establecer la región hay que incluir la sentencia "region=" y la región que queremos, por ejemplo para España sería, "region=es". Entra aquí para más información sobre los códigos.  Language (idioma): es el idioma en el que se devuelven los resultados, aquí podemos ver los idiomas disponibles. Para seleccionar español la sentencia sería, "language=es"

 Sensor (obligatorio): determina si la petición procede de un dispositivo con sensor (por ejemplo un receptor GNSS (GPS) de un teléfono móvil). Se puede seleccionar entre true o false. Un ejemplo sería, "sensor=false".

Estos serían los parámetros que vamos a usar, hay otro parámetro más "bound" pero por ahora no lo utilizaremos. Para separar los parámetros hay que utilizar el carácter "&", es decir, si por ejemplo sólo utilizamos "address" y "sensor" (puesto que son obligatorios) habría que separar las sentencias con "&", "address=Puerta+de+Sol,+Madrid,+España&sensor=false".

Un ejemplo completo sería:

http://maps.googleapis.com/maps/api/geocode/xml?address=Puerta+de+Sol,+Madrid,+Españ a&language=es&region=es&sensor=false

(7)

Si hacemos clic sobre el enlace anterior vamos a ver que el navegador nos muestra un archivo xml.

Y lo que tenemos que hacer con Visual Basic es recuperar la información para mostrarla al usuario.

Ahora que sabemos la teoría, vamos a programarlo:

Abrimos Visual Basic y creamos un nuevo proyecto y añadimos simplemente 3 TextBox (txtdireccion, txtlatitud, txtlongitud) y un Button, quedaría algo así:

(8)

Primero vamos a realizar unas declaraciones:

Imports System.Net Imports System.IO

Imports System.Xml.XPath

A continuación vamos a crear es una función con la que gestionaremos la petición y devolveremos la latitud/longitud encontrada:

Public Function CodificacionGeografica(ByVal direccion As String, Optional ByVal regionBusqueda As String = "es", Optional ByVal idioma As String = "es", Optional ByVal sensor As Boolean = False) 'busca latitud/longitud a partir de dirección

'La función recibe 4 parámetros. La región, idioma y sensor son opcionales.

'Creamos la dirección Dim direccion1 As String

direccion1 = "address=" & direccion

'Creamos la region Dim region1 As String

region1 = "region=" & regionBusqueda

'Creamos el idioma Dim idioma1 As String

(9)

idioma1 = "language=" & idioma

'Creamos el sensor Dim sensor1 As String

sensor1 = "sensor=" & sensor.ToString.ToLower

'Creamos la URL con los datos

Dim url = "http://maps.googleapis.com/maps/api/geocode/xml?" + direccion1 + "&" + region1 + "&" + idioma1 + "&" + sensor1

Dim LatLong As New ArrayList() 'Creamos un arraylist en el que almacenaremos toda la información

'Creamos una petición http y asignamos un tiempo máximo de espera de 3000 milisegundos

Dim req As HttpWebRequest = DirectCast(WebRequest.Create(url), HttpWebRequest) req.Timeout = 3000

'Preparamos el archivo xml

Dim res As System.Net.WebResponse = req.GetResponse() Dim responseStream As Stream = res.GetResponseStream() Dim NodeIter As XPathNodeIterator

Dim docNav As New XPathDocument(responseStream) Dim nav = docNav.CreateNavigator

(10)

'Creamos los paths ExLatitud = "GeocodeResponse/result/geometry/location/lat" ExLongitud = "GeocodeResponse/result/geometry/location/lng" 'Recorremos el xml NodeIter = nav.Select(ExLatitud) While (NodeIter.MoveNext()) LatLong.Add(NodeIter.Current.Value) Exit While End While NodeIter = nav.Select(ExLongitud) While (NodeIter.MoveNext()) LatLong.Add(NodeIter.Current.Value) Exit While End While

responseStream.Close() 'Cerramos la conexión Return LatLong 'Devolvemos el arraylist con los datos End Function

(11)

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

If txtdireccion.Text <> "" Then 'Si hay escrito algo en el texbox dirección

Dim datos As New ArrayList 'Creamos arraylist en el que almacenamos la información

datos = CodificacionGeografica(txtdireccion.Text.ToString.Replace(" ", "+"), , , ) If datos.Count > 1 Then 'Si se ha almacenado al menos dos datos

txtlatitud.Text = datos(0) 'Mostramos el primer resultado almacenado txtlongitud.Text = datos(1) 'Mostramos el segundo resultado almacenado Else

txtlatitud.Text = "No encontrado" txtlongitud.Text = "No encontrado" End If

End If End Sub

(12)

Como vemos es una proceso bastante sencillo, se podrían mejorar muchas cosas, por ejemplo, el archivo xml tiene un campo status que nos proporciona información sobre posibles errores, o mostrar la dirección encontrada. Esto lo veremos en próximos artículos.

Podéis descargar el código fuente aquí.

API Google Maps y Visual Basic.NET. Parte IV. Aplicación

completa

Retomando el API de Google Maps, hoy voy subir una aplicación con muchas funciones para utilizar desde Visual Basic .NET.

Lo interesante de la aplicación en sí, y dejando de lado la interfaz (y el código un tanto

confuso…), es la clase que incluye (Maps.NET). Se crea un objeto de la clase y se llama a sus

funciones que nos devuelven información, por ejemplo:

?

1 2 3

DimobjetoMaps AsNewMapsNet„Creamos un objeto de la clase MapsNet DimCP as string „Variable que contendrá el código postal

CP=objetoMaps.CodigoPostal(“Puerta del Sol, Madrid, España”) „Llamada a la función Este fragmento de código asignará a la variable CP, el código postal de “Puerta del Sol,

Madrid, España”. Como vemos es muy sencillo. Este es un pequeño ejemplo de lo fácil de utilizar la clase.

CLAVE API GOOGLE MAPS

Algo que se debe tener muy en cuenta, es que para algunas funciones se necesita tener una clave para usar el API de Google Maps. Esta clave se puede obtener en el siguiente enlace (https://developers.google.com/console/help/?hl=es#generatingdevkeys). En el caso de querer obtener información de locales como restaurantes o cines, se requiere el acceso mediante dicha clave. Para las funciones de la clase MapsNET, la clave es gratuita, únicamente que estamos limitados a un número de peticiones al día, por ejemplo, para la petición de lugares (Google Places), el número máximo de peticiones cada 24 horas son 100000. Para establecer la clave en la clase, se hace de la siguiente manera:

?

(13)

2 objetoMaps.ClaveMaps = “Nuestra clave” „En la cadena “Nuestra clave”, introduciremos la clave que nos proporcione Google

A la hora de abrir la aplicación, nos aparecerá una ventana con la opción de introducir nuestra clave que, como decía, no es obligatoria, pero sin ella habrá opciones que no funcionarán.

Introducción de clave API Funciones restringidas (necesaria clave API):

- Información de lugares (restaurantes, cajeros, etc.). - Places Autocomplete.

APLICACIÓN

Ahora voy a enumerar las opciones que tiene, a grandes rasgos, el programa.  Archivo:

o Ver seguimiento de peticiones HTTP: muestra todas las peticiones http que se han creado, es decir, todas las URL que hemos generado, por ejemplo:http://maps.google.es/maps?q=España&output=embed. Estas peticiones se registran con la hora, número de petición, estatus y si se producen excepciones.

o URL actual del mapa mostrado. o Clave API de Google Maps.  Editar:

o Funciones comunes para los navegadores (abrir pestaña, cerrar pestaña, siguiente, etc.).

(14)

Imagen general del programa  Buscar:

o Buscar mapa por dirección o latitud/longitud y mostrarlo en el mapa. o Buscar ISP (no funciona temporalmente).

 Codificación geográfica:

o Codificación geográfica.

o Codificación geográfica inversa. o Buscar código postal por dirección.  Elevación:

o Calcular la altitud de un punto en función de su latitud/longitud o dirección, mostrando además la resolución.

 Street View:

o Mostrar imágenes de Street View, pudiéndolas buscar por latitud/longitud o dirección. Opción de rotar en horizontal/vertical y hacer zoom en las imágenes.

(15)

Función para ver imágenes de Street View  Buscar locales (necesaria clave API):

o Busca locales y lugares filtrando los resultados por: dirección (o latitud/longitud), radio de búsqueda a partir de la dirección, tipo de establecimiento (cine, bar, cajero automático).

o Detalles del establecimiento seleccionado. Se puede ver la valoración y comentarios de los usuarios.

o Información del establecimiento. Número de teléfono, página web, página de Google+, dirección, etc.

(16)

Búsqueda y detalles del Museo Nacional del Prado  Calcular ruta:

o Calcula la ruta marcando un origen, destino e hitos intermedios. Pudiendo seleccionar el tipo de carretera (sin restricciones, evitar peajes en puentes y carreteras, evitar autopista y autovías), viaje a pie, en bicicleta o en coche.

o Muestra la ruta con sus indicaciones.

Detalle de ruta entre Ponferrada y Madrid (pasando por Benavente y Zamora) o Ver todos los mapas de la ruta.

(17)

Detalle de tramo y mapa general o Ver todas las imágenes street View de la ruta. o Ver las imágenes Street View tramo a tramo.  Mapas:

o Generador de mapas básico. Incluye la posibildad de crear un mapa en función de una dirección, zoom, formato (jpg, png, etc.), tamaño y tipo (satélite, híbrido, etc.).

o Generador de mapas completo. Incluye las funcionalidades anteriores además de poder incluir marcadores, crear una ruta para unir puntos, y múltiples estilos personalizables.

Generador de mapas completo  Configuración/Ayuda:

o Opciones para configurar el programa. Activar autocompletado. Guardar todas las peticiones, etc.

(18)

o Acerca de. Notificar un error. Liberador de recursos. Feedback.

CONCLUSIONES

La utilización del API de Google Maps es una sencilla forma de obtener información geográfica, además de proporcionarla de forma muy rápida e intuitiva. No obstante, el mayor inconveniente es que si Google cambia sus términos puede dejar de funcionar la aplicación o limitar el número de peticiones.

Cualquier duda del código (como dije al principio, está un poco desordenado), escribidlo en los comentarios, por favor.

Más información sobre el API en https://developers.google.com/maps/documentation/?hl=es-AR.