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:
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:
La función debe quedar así:
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í:
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
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
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!
ResponderEliminarde nada. si tienes alguna duda, no dudes en preguntar.
Eliminarmi principal problema es que no entiendo como pasa el dataset que tengo con las ubicaciones al fichero html... :(
ResponderEliminarsolucionado! 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
ResponderEliminarme alegro! la forma en la que paso el [[ADDRESS]] es la manera para pasar datos al html sí. Saludos
EliminarHola me podes decir como le pasaste varias direcciones? gracias
EliminarHola marisolo me podrias decir como lo solucionaste? desde ya muchas gracias
Eliminarhola de nuevo!
ResponderEliminarhe 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?
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.
EliminarMe 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.
ResponderEliminarHola, este ejemplo me ha ayudado mucho, podrías volver a subir el código, que el enlace esta caido, porfa.
ResponderEliminarok, a ver si me pongo en mi pc y lo vuelvo a subir.
Eliminarya lo he vuelto a subir
EliminarNO SIRVE EL LINK Y-Y
ResponderEliminarHola, he cambiado el enlace para descargarlo desde mi SkyDrive. Por si hay alguna duda es BlogGMap2.rar
ResponderEliminar