En este pequeño espacio vamos a ver cómo y para qué nos podrían ser útiles los marcadores arrastrables pudiendo obtener la latitud y longitud, para este ejercicio vamos a ocupar el post del uso de las Info Window.
Ya hemos visto como dibujar un marcador y asignarle un InfoWindow, así que esta parte será sencilla, ya que podremos mover el marcador de lugar y a placer, obteniendo las coordenadas de donde fue colocado, los usos que podemos darle varían infinitamente, actualmente podemos ver su uso por ejemplo en Foursquare cuando editamos un vvenue, podemos mover el marcador hasta el lugar más preciso donde se encuentra realmente el venue, más delante podremos hacer polígonos y delimitar las zonas usando las latitudes y longitudes para ser más precisos y bueno… miles de aplicaciones más que se pueden hacer e imaginar con ello, interesante, ¿no?
En la zona de Referencias de la API de GMaps v3 podremos encontrar a detalle las propiedades y funciones de cada elemento que usemos, para este ejemplo usaremos una propiedad de los marcadores que se llama draggable, esta propiedad hace que los marcadores que dibujemos puedan ser “arrastrables“, es decir, que los podamos tomar y arrastrarlos o moverlos a cualquier parte del mapa. Lo único que tenemos que hacer para hacer esa función es escribir en las propiedades del marcador draggable: true como lo veremos a continuación:
var marker = new google.maps.Marker({
position: myLatlng,
draggable: true,
map: map,
title:"Ejemplo marcador arrastrable"
});
Ahora nos centraremos en la función que se llama openInfoWindow.
function openInfoWindow(marker) {
var markerLatLng = marker.getPosition();
infoWindow.setContent([
'<b>La posicion del marcador es:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng(),
'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.'
].join(''));
infoWindow.open(map, marker);
}
En la función openInfoWindow podemos observar que recibe un parámetro al que manejaremos con el nombre de marker dentro de la función (al momento de invocar la función puede llamarse de cualquier otra manera, pero es necesario que sea un objeto tipo Marker); dentro de la función declaramos una variable llamada markerLatLng que va a almacenar la propiedad LatLng del marcador mediante la función getPosition(), lo que obtiene es un objeto con la latitud y longitud del marcador que recibió la función, para hacer referencia a cada uno de ellos, es con las subfunciones .lat() y .lng(); en el setContent del InfoWindow asignamos todo el contenido como un arreglo de cadenas, por eso la separación en comas y no con el signo más (+), con la instrucción join se indica que se concatene o se “unan” las cadenas; por último con la función open() de infoWindow mostramos de diálogo con el contenido que le asignamos anteriormente.
Ahora si veamos el código completo, la mayoría del código ya lo hemos visto así que aquí está:
var map = null;
var infoWindow = null;
function openInfoWindow(marker) {
var markerLatLng = marker.getPosition();
infoWindow.setContent([
'<b>La posicion del marcador es:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng(),
'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.'
].join(''));
infoWindow.open(map, marker);
}
function initialize() {
var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($("#map_canvas").get(0), myOptions);
infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatlng,
draggable: true,
map: map,
title:"Ejemplo marcador arrastrable"
});
google.maps.event.addListener(marker, 'click', function(){
openInfoWindow(marker);
});
}
$(document).ready(function() {
initialize();
});
Para este ejemplo y posteriores comenzaremos a usar funciones para un mejor manejo del código, como pueden ver hemos declarado la variable map e infoWindow como globales, las cuáles podrán usarse a través de las funciones sin temor a que se pierdan las referencias al liberar la función. La razón por la cual es mejor poner este código en una función, es que si requerimos colocar más de un marcador, podamos enlazar un InfoWindow diferente para cada uno, sin necesidad de escribir el mismo código individualmente, además de que la función puede re-usarse tantas veces como sea necesario. Para ver cómo es que funciona este ejercicio ve al siguiente enlace:
Es todo por esta ocasión si tienen dudas ya saben cómo y dónde preguntar, mucha suerte…
Enjoy this Life!!
Una consulta como podria hacer para que cuando arrastre el marcador me aparesca otro, osea que el primero se quede en su lugar y que al querer arrastrarlo aparesca otro el cual me pueda dar informacion de lat y lon.
tner dos uno con la informacion que tiene actualmente y el otro con la nueva informacion.
@orenzo tienes que crear una función que solamente dibuje marcadores, al momento de que muevas el pin, obtienes las nuevas coordenadas y se las mandas a la función y ésta se encargará de dibujar el siguiente marcador, es la forma más sencilla que se me ocurre, además de la más fácil =P
hola
puse el codigo pero la verdad no puedo hacer que funcione para mi sitio que actualmente solo tengo en mi maquina
logro ver el mapa moverlo y todo pero no me pone el marcador ni me despliega la info espero me puedas ayudar
@Paul Claro, pega el código que estás usando, solo el script y ya te echo una mano
Disculpa por casualidad saber trabajar con la libreria infoBubble?? necesito actualizar un infoBubble
@jean no he trabajado con la librería, pero no parece complicada, qué ocupas?
Como podria guardar las cordenadas en una base de datos mysql?
gracias
@mari pues, necesitas 2 campos en una tabla de tu base de datos, esos datos deben ser algo como:
`lat` FLOAT( 10, 6 ) NOT NULL
`lng` FLOAT( 10, 6 ) NOT NULL
Esto debería hacerse cada vez que una coordenada es consultada, sin embargo y recuerda que si vas a guardarlas, por ética y políticas de uso debes avisar al usuario que vas a conservar sus datos.
Hola alex gracias por tu respuesta, lo de la base lo tengo claro lo que no es como lograrlo automaticamente desde el codigo que compartes algo asi como cuando se arrastre a una nueva posicion se guarde la nueva posicion en la base en los campos que indicas.
Pero como lograrlo soy mala no entiendo a google maps
Saludos
@Mari Puedes agregar un listener, al marcador, no lo he hecho pero… deja investigo bien y te contacto con correo directo
A muchas gracias alex ojalá puedas ayudarme estare eternamente agradecida.
Disculpa, ¿cómo podría hacer para que los marcadores estén numerados, pero que su numeración se actualice si agrego un nuevo elemento?
@nah si lo haces dinámico todos tienen una llave (identificador o key), es cuestión de “guardar” o manejar esa llave y que puedas agregar más marcadores después.
Seria posible que me enseñes como hacer para que la latitud y longitud que me indica en este mapa aparesca en un form tal como esta en la anterio programacion que lo arroga atraves de
document.fm.coordenadas.value = point.y+””
document.fm.coordenadas2.value = point.x+””
Gracias anticipadas.
@Martin si quieres lo vemos por correo, ya migré tu código de la v2 a la v3
Gracias como hago para poder ver el codigo. buen día.
Vale hacer la salvedad de que el evento que mencionas (CLICK) debe de cambiarse por el evento MOUSEUP para capturar las nuevas coordenadas.
Ej:
google.maps.event.addListener(marker,’mouseup’, function(){
openInfoWindow(marker);
});
@Beatriz Cualquiera de los 2 es válido, ambos funcionan, yo lo hice con el evento click por ser como el más sencillo e intuitivo, ya dependerá del tipo de aplicación para usar algún otro evento 🙂
Hola Alex esta interesante es de Google Maps lo que quiero hacer es por medio de mysql darle las coordenas de algunos puntos que tengo marcados y me los despliegue en el mapa haz hecho eso con V3?
@tom claro, es simple, solamente una pregunta, ¿deseas seguir teniendo control sobre los marcadores o solo es dibujarlos y listo?
hola alex, estoy usando tu codigo y lo que quiero es pasar latitud y longitud a un campo de form tipo texto para luego enviarlo a la base de datos, como puedo hacer esto, muchas gracias saludos
@bruno a partir de este código, con javascript puedes poner los valores en las cajas de texto que requieres, usando los valores del marcador, algo como:
var markerLatLng = marker.getPosition(); getElementById('lat').value = markerLatLng.lat(); getElementById('lng').value = markerLatLng.lng();A partir de ahí comienza tu lógica para mandar esos datos a la Base de Datos, mediante un formulario.
Se agradece las publicaciones respecto al tema ya que me ha sido de gran ayuda ya que se encuentran claras y con ejemplos, exito!
hola amigo me pudieras decir como ago para ya que este en un punto establecido la marca no se pueda mover, como darle opcion de editar para moverla al punto que necesito y obtener las coordenadas y que se guarde por que cada ves que refresco el punto vuelve a la direccion que esta solo que no es el punto correcto, espero me ayudes gracias.
O.o creo que no entendí del todo qué quieres hacer… =S
Hola alex, estoy utilizando tu código para un proyecto, pero no se porqué no se dibuja el mapa en el navegador, me podrías ayudar?
Necesitaría ver el código para ver qué estás haciendo mal, lo has publicado en algún lado?
Hola Alex, buenas tardes.
Tengo un código basado en el tuyo, el problema es que el marcador no me muestra ningún info windows, crees que podrías ayudarme?
@Eros necesitaría ver el código para poder ayudarte, mándalo en la sección de contacto
Hola alex.
Ante todo felicitaciones por tus aportes.
desearia me puedas ayudar como puedo agregar variables a un marcador, para poder usar estas en un proceso determinado.
por ejemplo lo que deseo es k al pasar el mouse me muestre en un form los datos relacionados a ese marker.
necesito crear varios marcadores con un id especifico y al pasar el mouse con ese di referenciar a una base de datos para que me entregue información en un form.
Gracias por al respuesta
@Oscar eso es programación en Javascript usando los controles de eventos para la interfaz del usuario, algo como:
google.maps.event.addListener(marker, 'mouseover', function() { /* tu proceso */ }Esto se hace justo después de dibujar el marcador y antes de cerrar la función que lo hace para que se quede ligado al ID del marcador.
Gracias por el aporte.. justamemte lo que buscaba
buenas cree una web vacia con el codigo pegado tuyo y no aparece nada…
Prueba cambiando la versión de jQuery, copia el código que está en mi GitHub
Excelente amigo, gracias
un , preguntica, tal vez esta fuera de contexto pero bueno es una idea parecida lo que ando buscando, como le hago para dibujar un poligono y que me muestre la linea por donde esta el cursor, hasta que no de dblclick o otra cosa no me fije el segmento en el mapa.
Puedo referirte a un ejemplo, puedes verlo directo en la API https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
gracias amigo llevava un milenio buscando algo asi pero tu te has volado la barda gracias
Hola Alex! excelente trabajo. Mi pregunta. Existe alguna forma de quitar la leyenda for development purposes only google maps