Cyberexplorador's Blog

Manipulación de GoogleMaps con ASP.Net

May 15, 2010 a las 4:34 pm | Publicado en ASP, Programacion | 8 comentarios
Etiquetas: asp.net, googlemaps, manipular, visual-studio-2008

Ahora les traigo otro tutorial muy interesante. Vamos a hacer lo siguiente:

1. Vamos a tener en una página de asp.net insertado el GoogleMaps.
2. Vamos a crear un buscador con Visual Studio.Net 2008 para encontrar cualquier lugar en GoogleMaps.
3. El buscador será de dos tipos: podremos buscar por coordenadas, o podremos buscar por el nombre de algún lugar específico.

Esto será lo que vamos a crear:

Como se puede ver en la imagen tenemos el buscador por coordenadas o por localidad. Y el resultado nos mostrará en el GoogleMaps que insertamos en nuestra página web.

Para la programación utilizaremos el Visual Studio 2008 (con la versión 2005 también funciona igual). Y vamos a necesitar algunas cosas más que lo iremos diciendo en el tutorial. Ahora si, manos a la obra!!!

Para hacer este programa utilizaremos un API llamado GoogleMaps de Subgurim, para ello nos vamos a la siguiente dirección:

http://googlemaps.subgurim.net/descargar.aspx

Allí nos descargamos un archivo comprimido que contiene el archivo GMaps.dll

Luego con el Visual Studio 2008 creamos un nuevo Sitio web. En el Explorador de soluciones, damos clic derecho al proyecto y escogemos «Agregar referencia»:

En la pantalla que aparece nos vamos a la pestaña Examinar y buscamos el archivo dll que nos descargamos:

Automáticamente en el Explorador de soluciones se habrá creado una carpeta llamada Bin que contiene el archivo GMaps.dll

Ahora antes de continuar debemos comentarles que para hacer uso del API de Google de GoogleMaps es necesario obtener una clave que nos proporciona Google en la siguiente dirección:

http://code.google.com/intl/es-ES/apis/maps/

Allí nos vamos donde dice «Regístrate para obtener una clave de API de Google Maps»:

Ahi Google nos pide que aceptemos el contrato e ingresemos el sitio web donde lo vamos a usar, yo puse el sitio de mi blog, si no tienes página web entonces ingresa http://localhost. Y luego Google te proporciona la clave que vamos a necesitar. También es importante decir que para que Google te proporcione el API debes tener una cuenta en Gmail:

Listo una vez que tengamos la clave del API, nos vamos al Visual Studio .Net al Explorador de soluciones y damos doble clic en el archivo web.config allí vamos a encontrar la siguiente línea de código:

<appSettings/>

Allí borramos esa línea de código e insertamos la siguiente:

<appSettings>
<add key=»googlemaps.subgurim.net» value=»tuClave_yourKey«/>
</appSettings>

La parte que está en rojo debe ser reemplazada por el código API que obtuvieron anteriormente en la página de Google. Guardamos el archivo web.config y lo cerramos.

Ahora volvemos a la página principal que es Default.aspx y nos vamos a la sección de Código. Allí al comienzo del documento encontramos la siguiente línea:

<%@ Page Language=»VB» AutoEventWireup=»false» CodeFile=»Default.aspx.vb» Inherits=»_Default» %>

Debajo de esa línea de código escribimos la siguiente:

<%@ Register Assembly=»GMaps»  Namespace=»Subgurim.Controles»  TagPrefix=»cc»  %>

Ahora dentro del código HTML tenemos la etiqueta <form> y dentro una etiqueta <div></div> entre esas dos etiquetas div insertamos la siguiente línea de código:

<cc:GMap ID=»GMap1″ runat=»server» />

El nombre del mapa será GMap1 y ese nombre nos servirá para manipularlo. Ahora nos vamos a la parte de Diseño y podremos ver que aparece un recuadro como el siguiente:

Estando en el modo Diseño damos doble clic en cualquier parte blanca de la página para ingresar al método Page_Load. Esto abrirá el archivo Default.aspx.vb y cargará el método Page_Load, nos vamos al inicio de ese archivo e importamos las siguientes librerías:

Imports System
Imports System.Web.UI
Imports Subgurim.Controles

Ahora dentro del método Page_Load vamos a insertar el siguiente código:

‘Establecemos la longitud y latitud que se mostrará al cargar la página web
Dim latitud As Double
Dim longitud As Double
latitud = 40.381090
longitud = -3.622205

‘Carga el mapa con los valores establecidos anteriormente
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)

‘Establecemos alto y ancho en px
GMap1.Height = 300
GMap1.Width = 400

‘Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
GMap1.addControl(New GControl(GControl.preBuilt.LargeMapControl))

‘GControl.preBuilt.MapTypeControl: permite elegir un tipo de mapa y otro.
GMap1.addControl(New GControl(GControl.preBuilt.MapTypeControl))

‘Permite hacer zoom con la rueda del mouse
GMap1.enableHookMouseWheelToZoom = True

‘Tipo de mapa a mostrar
GMap1.mapType = GMapType.GTypes.Normal

La explicación del código aparece en los comentarios. Ahí puse un ejemplo de longitud y latitud reales. Puedes probar con estos otros ejemplos de latitud y longitud válidos:

Quito
-0,229498
-78,524277

New York
40,7142691
-74,0059729

Londres
51,5001524
-0,1262362

Luego te mostraré cómo puedes obtener las coordenadas de cualquier lugar en este mismo tutorial. Ahora presionamos Ctrl + F5 para probar el mapa. Te debe cargar algo como esto:

Ahora volvemos al archivo Default.aspx a la vista de Diseño y sobre el mapa vamos a insertar los siguientes controles:

En la imagen se muestra los nombres de los componentes. Se debe respetar eso para que funcione el código que vamos a poner a continuación.

El RadioButtonList llamado RbtOpciones debe tener habilitada la opción AutoPostBack:

Ahora damos doble clic en el elemento rbtOpciones y carga el método rbtOpciones_SelectedIndexChanged allí vamos a copiar el siguiente código:

Dim val As Integer
‘Obtenemos en una variable el índice de la opción escogida
val = rbtOpciones.SelectedIndex()

‘Opcióm cero es por coordenadas y habilitamos los elementos que se requieren para buscar por coordenadas
If val = 0 Then
txtLatitud.Enabled = True
txtLongitud.Enabled = True
btnIr.Enabled = True
txtCiudad.Enabled = False
btnCiudad.Enabled = False

‘Opción uno es por ubicación y habilitamos los elementos que se requieren para buscar por ubicación
ElseIf val = 1 Then
txtLatitud.Enabled = False
txtLongitud.Enabled = False
btnIr.Enabled = False
txtCiudad.Enabled = True
btnCiudad.Enabled = True
End If

Ahora vamos al botón que se llama btnIr (el que contiene el texto Cambiar) le damos doble clic y en el método Click agregamos el siguiente código:

Dim latitud As Double
Dim longitud As Double

‘Almacenamos en variables los datos de los campos de texto de longitud y latitud
latitud = Me.txtLatitud.Text
longitud = Me.txtLongitud.Text

‘Mostramos el mapa en esa ubicación por coordenadas
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)

Ahora nos vamos al botón btnCiudad (el que tiene el texto Ir…) y le damos doble clic y en el método Clic insertamos el siguiente código:

Try
Dim GeoCode As Subgurim.Controles.GeoCode
Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings(«googlemaps.subgurim.net»)

‘Obtenemos la ubicación del campo de texto txtCiudad
GeoCode = GMap.geoCodeRequest(Me.txtCiudad.Text, sMapKey)
If GeoCode.valid = True Then
‘Mostramos la longitud y latitud de la ubicación en los labels
Me.lblLatitud.Text = GeoCode.Placemark.coordinates.lat
Me.lblLongitud.Text = GeoCode.Placemark.coordinates.lng

‘Cargamos el mapa en la ubicación por la que se hizo la búsqueda
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
‘Mostramos mediante una marca la ubicación
AddMarker(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

Else
Msg(«No se puede encontrar la ubicación»)
End If
Catch ex As Exception
Msg(ex.Message)
End Try

Ahí seguramente te aparecen dos errores. No te preocupes.  Ahora nos salimos del método Clic, donde termina el End Sub. Allí copiamos el siguiente código:

Private Sub AddMarker(ByVal dLat As Double, ByVal dLong As Double)
Try
Dim gLatLng As New Subgurim.Controles.GLatLng(dLat, dLong)

Dim oOption As New Subgurim.Controles.GMarkerOptions
oOption.draggable = True

GMap1.resetMarkers()
GMap1.resetListeners()

oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)

GMap1.addGMarker(oMarker)
GMap1.addListener(New Subgurim.Controles.GListener(oMarker.ID, Subgurim.Controles.GListener.Event.dragend, _
«function(){ document.getElementById(‘hidLat’).value=» & oMarker.ID & «.getPoint().lat();document.getElementById(‘hidLng’).value=» & oMarker.ID & «.getPoint().lng() }»))
Catch ex As Exception
Msg(ex.Message)
End Try
End Sub

Fuera de ese método copiamos el siguiente código:

Private Sub Msg(ByVal sText As String)
Response.Write(«<script type=’text/javascript’>alert(‘» & sText & «‘);</script>»)
End Sub

Volvemos al modo Diseño y damos doble clic en el botón btnTipoMapa y dentro copiamos el siguiente código:

Dim val As Integer
Dim tipo_datos As Integer

tipo_datos = rbtOpciones.SelectedIndex()
val = lstTipoMapa.SelectedIndex()
If tipo_datos = 0 Then
If val = 0 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
ElseIf tipo_datos = 1 Then
If val = 0 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
End If

Listo el programa ha sido finalizado. Presionamos F5 para probar. Puedes buscar por coordenadas (arriba te dejé unas 3 coordenadas para que pruebes) o puedes buscar por ubicación. Puedes poner por ejemplo Torre Eiffel, además cuando buscas por ubicación puedes conocer las coordenadas del sitio que buscaste. Además puedes cambiar el tipo de Mapa desde el formulario.

No olvides dejar sus comentarios, sugerencias o preguntas. Por cierto en la versión 2005 del Visual Studio .Net también funciona este tutorial.

Se pueden descargar el programa de la siguiente página: http://www.mygnet.net/codigos/aspdotnet/net/manipular_googleearth_desde_asp_dot_net.3190

Para ejecutarlo deben ingresar el API de Google en el archivo web.config

Publiqué unos videos sobre este tutorial. Aquí les comparto:

• Primera parte

• Segunda parte

• Tercera parte

Créditos del video:

Realizador del video: Hugo Mora (cyberexplorador)

Voz y edición del video: Pablo Yacelga