domingo, 22 de enero de 2012

Google Maps - Windows Form Parte 2

En una primera parte de Google Map - Windows Form vimos como introducir un mapa de Google Maps en nuestra aplicación mediante el objeto navegador. Lo siguiente que veremos en esta segunda parte será como obtener datos acerca del mapa leído. Para ser más exactos en este ejemplo obtendremos las coordenadas de la dirección introducida mediante un botón. Partiremos de la aplicación creada en la primera parte para nuestro propósito.

Inicialmente modificaremos el código html añadiendo en el cuerpo del documentos dos inputs de tipo oculto. Por ejemplo yo he añadido: 

<input type="hidden" id="latitud" /> 
<input type="hidden" id="longitud" />

En estos campos ocultos almacenaremos las coordenadas obtenidas mediante la API de Google Maps. Para conseguir almacenar estos datos deberemos ir a la función "verDireccion" del código Javascript. En este método añadiremos después de colocar la marca lo siguiente:

document.getElementById("latitud").value = results[0].geometry.location.lat(); document.getElementById("longitud").value = results[0].geometry.location.lng();

La función debe quedar así:

   function verDireccion (results,status){
 if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
        document.getElementById("latitud").value = results[0].geometry.location.lat();
        document.getElementById("longitud").value = results[0].geometry.location.lng();

      } else {
        alert("Error en la Geocodificacion: " + status);
      }
  }


Una vez realizado esto deberemos irnos al diseño de nuestro formulario de Windows. En él añadiremos un botón para obtener las coordenadas. Yo he puesto que el botón se active una vez que el navegador ha cargado el documento. Este es el evento 'DocumentCompleted' del objeto navegador.

En el evento click del botón de obtención de coordenadas aprovecharemos que el objeto navegador contiene: "document.getElementById(...)". Con lo que el evento click de este botón quedaría así:

 
private void botCoord_Click(object sender, System.EventArgs e)
{
    string latitud = wbGMap.Document.GetElementById("latitud").GetAttribute("value").ToString();
    string longitud = wbGMap.Document.GetElementById("longitud").GetAttribute("value").ToString();
           
    if (latitud != string.Empty && longitud != string.Empty)
    {
         string mensaje = string.Format("Latitud: {0} \nLongitud: {1} ", latitud, longitud);
         MessageBox.Show(mensaje,"Coordenadas");
    }

}


Una vez hecho esto habremos finalizado. Aquí podemos ver una imagen con el resultado.



Descargar el código aquí.

Si tenéis dudas acerca de la API de Google Maps en una entrada anterior podemos encontrar enlaces de interes a la documentación de la API.

Google Maps - Windows Form - Parte 1
Google Maps - Windows Form - Parte 3

16 comentarios:

  1. muchísimas gracias! ahora sí! mi próximo reto es poder pasarle una serie de ubicaciones y que coloque los diferentes markers. voy a investigar, gracias de nuevo!

    ResponderEliminar
    Respuestas
    1. de nada. si tienes alguna duda, no dudes en preguntar.

      Eliminar
  2. mi principal problema es que no entiendo como pasa el dataset que tengo con las ubicaciones al fichero html... :(

    ResponderEliminar
  3. solucionado! he hecho un poco de chapuza y cuando tú en el código haces el replace de [[ADDRESS]] y le pasas la dirección he pasado varias :D

    ResponderEliminar
    Respuestas
    1. me alegro! la forma en la que paso el [[ADDRESS]] es la manera para pasar datos al html sí. Saludos

      Eliminar
    2. Hola me podes decir como le pasaste varias direcciones? gracias

      Eliminar
    3. Hola marisolo me podrias decir como lo solucionaste? desde ya muchas gracias

      Eliminar
  4. hola de nuevo!
    he encontrado una web q me ha venido muy bien para introducir mejoras en mi aplicación. os la pongo por si os sirve tb http://www.maestrosdelweb.com/editorial/guia-mapas-marcadores/

    ahora mismo estoy luchando por conseguir llamar a una función si se hace click sobre infowindow (el bocadillo con información que puede salir al pulsar sobre un marker). de momento no encuentro nada... ¿alguien sabe como hacerlo?

    ResponderEliminar
    Respuestas
    1. Gracias por la web. Para conseguir algun evento en el infowindow deberas realizarlo mediante javascript. Debes tener en cuenta que es un html contenido en una apliacion de ventana.

      Eliminar
  5. Muchas grácias!!! Muy buen aporte!!! Es justo lo que estaba buscando para comenzar. Muchas otras páginas hacen lo mismo utilizando un WebBrowser, pero a la hora de desplegarlo dentro de él, lo hacen como si estuviera en la pagina de "Google Maps", osea como una pagina de un explorador tal cual y no solo el mapa solito, que es lo que necesitaba. Saludos!!!

    ResponderEliminar
    Respuestas
    1. Me alegro de que te sirva como ayuda =) Sí a menudo si buscas simplemente muestran la página de GoogleMaps. De este modo disponemos de la API de GoogleMaps para programar los mapas como queramos y desplegarlos en nuestra ventana.

      Eliminar
  6. Hola, este ejemplo me ha ayudado mucho, podrías volver a subir el código, que el enlace esta caido, porfa.

    ResponderEliminar
  7. Hola, he cambiado el enlace para descargarlo desde mi SkyDrive. Por si hay alguna duda es BlogGMap2.rar

    ResponderEliminar