Google Maps y Asp.Net (3) Mover un Marker y Obtener su Latitud y Longitud
Holas ami@s ahora veremos como mover o arrastrar un Marker, y en la posicion que este este podremos saber la latitud y Longitud del Marker, y bueno con que fin, tenemos n posibilidades, pero en este post, solo nos limitaremos a eso, ya despues le daremos un aplicación concreta.
Primero veremos que necesitamos colocar en la parte del HTML, colocamos 2 inputs, donde se mostrarán la Latitud y Longitud cada vez que se arraste el Marker por el Mapa y se suelte.
<body onload="initialize()">
<form id="form1" runat="server">
Latitud:<input id="txtLatitud" />
Longitud:<input id="txtLongitud" />
<div id="map_canvas" style="width: 500px; height: 500px"></div>
<hr />
</form>
</body>
|
Luego colocaremos el Java Script en la Parte de la etiqueta Head, lo siquiente.
<script type="text/javascript">
var marker;
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(-9.1888700, -77.34375);
map.addControl(new GLargeMapControl());
map.setCenter(center, 6);
map.setUIToDefault();
marker = new GMarker(center, { draggable: true });
map.addOverlay(marker);
GEvent.addListener(marker, "dragstart", function () {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function () {
marker.openInfoWindowHtml("Gracias por visitarme");
document.getElementById("txtLatitud").value = marker.getPoint().lat();
document.getElementById("txtLongitud").value = marker.getPoint().lng();
});
}
}
</script>
|
La Seccion Rosada Inicializa y crea el Mapa, crea un GLargeMapControl, para configurar el Zoom, y le agrega un Marker inicial al Mapa.
En la parte Amarilla se crea un Evento dragstart para el Marker, le dice, cuando arrastren al marker que se cierre el InfoWindow en el Mapa.
En la parte Verde se crea un Evento dragend para el Marker, le dice, cuando se suelte el marker de lo que se esta arrastrando, que se muestre un InfoWindowsHtml con un mensaje "Gracias por visitarme", y luego se captura la Latitud y la Longitud, para que sean mostrados en los input que creamos en el Formulario.
A para hacerles recordar, que siempre deben tener un script que de da Google para que puedas usar su API de Google Maps.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAszwnb6dZYCsQu-_aveaU4xTDvvvkTBERZATnPCc0psKHgVls_hQ3YkvyHh0WnaZIt6EVA" >
|
Bueno lo unico que queda es Correr la aplicación y ver los resultados.
hola buenas Giancarlo tengo una duda con respecto al mapa
ReplyDeleteno me esta cargando
Hola Mario, puedes copiar el error, presionando F12 en el navegador y ver la consola del Chrome, ahi nos debe estar diciendo que error es. también puede ser que la API key ya no es valida, si estas usando la que figura en este post, podrías generar una propia.
DeleteSaludos