API Google Maps y Visual Basic.NET. Parte VII. Mostrar imágenes Street View.

En esta entrada vamos a ver cómo mostrar imágenes de Google Street View, pudiendo modificar los ángulos de visión y el zoom. El proceso es muy sencillo, primeramente hay que crear una URL que muestre la imagen y luego descargar esa imagen al Picturebox. Realmente, este último paso se podría obviar si utilizamos el control WebBrowser, ya que podríamos mostrar la imagen directamente sobre él.

Vamos a ver un ejemplo de una URL que mostraría una imagen:

http://maps.googleapis.com/maps/api/streetview?size=400x400&location=Puerta+de+Sol,+Madrid,+España&heading=0&pitch=0&fov=30&sensor=false

Ahora vamos a ir explicando cada parámetro de los que vemos:

PARÁMETROS

• Size (obligatorio): indica el tamaño de la imagen que será devuelta. Un ejemplo sería "size=400x400".
• Location (obligatorio): localización de donde se quiere ver la imagen. Puede utilizarse una dirección postal (Puerta del Sol, Madrid, España) o por latitud/longitud (40.4167522,-3.7033701). Un ejemplo sería, "location=Puerta+de+Sol,+Madrid,+España" o "location=40.4167522,-3.7033701".
• Heading (opcional): indica el ángulo horizontal de la cámara, es decir, desde la localización seleccionada si toma valor 90º, apuntará al Norte, en caso de ser su valor 180º, apuntará al Sur. Si este parámetro no se determina, apuntará a la localización especificada. Un ejemplo sería, "heading=90".
• Pitch (opcional): indica el ángulo vertical de la cámara, que oscila desde -90º (cámara apuntando hacia abajo) hasta los 90º (cámara apuntando hacia arriba). Un ejemplo en el que la cámara apuntaría  sin ángulo de inclinación sería, "pitch=0".
• Fov (opcional): indica el zoom que se va a aplicar a la imagen. Sus valores oscilan entre 10 y 120. El valor 120 sería el menor zoom posible y el valor 10 el zoom máximo. Un ejemplo de este parámetro sería, "fov=90".
• 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".

Ahora vamos a ver el código fuente. En esta primera parte habrá dos funciones. La primera va a crear la URL con los parámetros, y llamará a la segunda función que devolverá el Bitmap asociado a esa imagen, es decir, va a descargar la imagen y asignarla a un Bitmap.

'Se almacenará al url de la imagen
Property URLimagen As String

'Función que recibe los parámetros y devulve un bitmap con la imagen de Street View
Public Function StreetView(ByVal direccion As String, ByVal tamañoImagen As Size, Optional ByVal GiroHorizontal As Integer = -1,
                           Optional ByVal GiroVertical As Integer = 0, Optional ByVal zoom As Integer = 90)

    'Bitmap con tamaño imagen recibido 
    Dim imagenStreet As New Bitmap(tamañoImagen.Width, tamañoImagen.Height)

    'CREACIÓN de URL---------

    'Creamos variable tamaño
    Dim tamaño As String
    tamaño = "size=" & tamañoImagen.Width & "x" & tamañoImagen.Height

    'Creamos variable direccion
    direccion = direccion.Replace(" ", "+")
    direccion = "&location=" & direccion

    'Creamos variable giro horizontal
    Dim horizontal As String
    If GiroHorizontal <> -1 Then
        horizontal = "&heading=" & GiroHorizontal
    Else
        horizontal = ""
    End If

    'Creamos variable giro vertical
    Dim vertical As String
    vertical = "&pitch=" & GiroVertical

    'Creamos variable zoom
    Dim zoomS As String
    zoomS = "&fov=" & zoom

    'Creamos la url con los datos
    Dim url = "http://maps.googleapis.com/maps/api/streetview?" & tamaño & direccion & horizontal & vertical & zoomS & "&sensor=false"
    'Guardamos al url en la propiedad URLimagen
    URLimagen = url
    '-------

    'Descargamos la imagen
    imagenStreet = ImagenDesdeURL(url)

    Return imagenStreet
End Function

'Carga imagen desde URL y devuelve un bitmap
Public Function ImagenDesdeURL(ByVal URL As String)
    'Creamos un bitmap vacío
    Dim bmp As Bitmap = Nothing

    Try
        'Creamos la petición
        Dim request As System.Net.WebRequest = System.Net.WebRequest.Create(URL)
        Dim response As System.Net.WebResponse = request.GetResponse()
        Dim responseStream As System.IO.Stream = response.GetResponseStream()
        bmp = New Bitmap(responseStream)
    Catch ex As Exception
    End Try
    Return bmp
End Function

El siguiente paso será crear un formulario similar al que se muestra en la siguiente imagen:

Formulario Street View

Y vamos a asignar el siguiente código al botón y a los 3 HScrollbars.

'Botón para buscar imagen
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    PictureBox1.Image = StreetView(txtDireccion.Text, New Size(nupAncho.Value, nupAlto.Value), HShorizontal.Value, HsVertical.Value, HsZoom.Value)
    txtURL.Text = URLimagen
End Sub

'Scroll para ángulo vertical
Private Sub HsVertical_Scroll(sender As Object, e As ScrollEventArgs) Handles HsVertical.Scroll
    lblvert.Text = HsVertical.Value
End Sub
'Scroll para ángulo horizontal
Private Sub HShorizontal_Scroll(sender As Object, e As ScrollEventArgs) Handles HShorizontal.Scroll
    lblhoriz.Text = HShorizontal.Value
End Sub
'Scroll para zoom
Private Sub HsZoom_Scroll(sender As Object, e As ScrollEventArgs) Handles HsZoom.Scroll
    lblzoom.Text = HsZoom.Value
End Sub

Ejecutamos el programa y ya podemos empezar a visualizar imágenes estáticas de Street View en nuestra aplicación.

Imagen Street View

Más información sobre imágenes Street View aquí.

Descarga el código fuente: