I need to do something similar to the following Google maps example: get latitude & longitude
At the moment I have only been able to get lat and long by locating the pointer, but I want to get the address of those coordinates and vice versa. Also that from an input it can locate on the map and obtain its coordinates.
var marker; //variable del marcador
var coords = {}; //coordenadas obtenidas con la geolocalización
//Funcion principal
initMap = function ()
{
//usamos la API para geolocalizar el usuario
navigator.geolocation.getCurrentPosition(
function (position){
coords = {
lng: position.coords.longitude,
lat: position.coords.latitude
};
setMapa(coords); //pasamos las coordenadas al metodo para crear el mapa
},function(error){console.log(error);});
}
function setMapa (coords)
{
//Se crea una nueva instancia del objeto mapa
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 13,
center:new google.maps.LatLng(coords.lat,coords.lng),
});
//Creamos el marcador en el mapa con sus propiedades
//para nuestro obetivo tenemos que poner el atributo draggable en true
//position pondremos las mismas coordenas que obtuvimos en la geolocalización
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(coords.lat,coords.lng),
});
//agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica
//cuando el usuario a soltado el marcador
marker.addListener('click', toggleBounce);
marker.addListener( 'dragend', function (event)
{
//escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
var latGet = this.getPosition().lat();
var lngGet = this.getPosition().lng();
console.log(this.getPosition().lng());
obtainedCoords(latGet,lngGet);
});
}
//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
// Carga de la libreria de google maps
// Funcion para guardar los datos en bd
function obtainedCoords(latGet,lngGet){
var geocoder = new google.maps.Geocoder();
var lat = latGet;
var lng = lngGet;
}
If you have seen a similar example and can share it, I would be grateful
You need to do reverse geocoding.
Give a
HTTP GET
to the following URLYou have as a result:
Look at the property: "formatted_address"
To enable this API, go to https://developers.google.com/maps/documentation/geocoding/start