Índice
Objetivo
En esta sección describiremos cómo permitir a los usuarios de nuestra web que añadan sus propias marcas a nuestro mapa. En este primer ejemplo simplemente mostraremos cómo pertimir al usuario colocar una marca en la posición que él quiera y posteriormente capturar la posición en la que el usuario colocó la marca.
Para añadir la marca, en el código de nuestra función pondremos:
Mover una marca
Lo primero que debemos hacer es crearnos un mapa con una (también se puede hacer con más de una, pero en este ejemplo sólo utilizaremos una) marca. Si no sabes cómo hacer esto, mira cómo añadir una marca simple.
Para que el usuario pueda mover la marca a su antojo hay que hacer un pequeño cambio en el código. Sustituiremos la línea:
var center = new GMarker(map.getCenter());
por esta otra:
var center = new GMarker(map.getCenter(), {draggable: true});
Podéis ver el resultado en el siguiente ejemplo.
Capturar la posición de la marca
Para capturar la posición de la marca que colocó el usuario es necesario realizar un cambio en el código. Necesitamos que la variable que contiene la marca (que hemos llamado center) sea visible desde cualquier sitio, ya que si no es visible no podremos saber nada de ella. Para conseguir esto, simplemente sacamos la definición de la variable fuera de la función load, dejando la inicialización dentro de la función. El quedaría de la siguiente manera:
var center;
function load() {
...
center = new GMarker(map.getCenter(), {draggable: true});
map.addOverlay(center);
}
Una vez hecho esto, basta con añadir un par de funciones para obtener la longitud y la latitud de la marca:
function getLongitud(){
return center.getLatLng().lng();
}
function getLatitud(){
return center.getLatLng().lat();
}
El resultado final lo podemos ver en el siguiente ejemplo.