简体   繁体   中英

How to get address from center (pan) Google Maps API?

I'm building a google map where you get lat, long and address for a form. It gets your location through GPS and automatically center the map and gets the coordinates. Also if you pan the map you will get this data from the new center.

I've seen a similar question How to get the formatted address from a dragged marker in Google Version Maps that gets you the address from a draggable marker. I wanna see if it's possible for the Reverse Geocoding Service to have it just from the center of the map whenever I pan it.

Here is part of the code.

  google.maps.event.addListener(map, "center_changed", function() {
    var lat = map.getCenter().lat();
    var lng = map.getCenter().lng();
    $('#lat').val(lat);
    $('#lng').val(lng); 
  }); 

...

<body>
<div id="map-canvas"></div>

    <input id="lat"/>
    <input id="lng"/>
</body>

By now I can get the coordinates. Here you can see my map. http://output.jsbin.com/vopuhu

It's a similar map from the one that Uber uses to pick up customers.

Thanks!

Here is the Geolocation part also...

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'Ubicación GPS',
      icon:'https://storage.googleapis.com/ops_geojson/Flecker/Icons/GPS_Tiny01.png'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});
} else {

handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(19.043516, -98.198232),
content: content,
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);

}

You can use reverseGeocoder

google.maps.event.addListener(map, "center_changed", function() {
var lat = map.getCenter().lat();
var lng = map.getCenter().lng();
$('#lat').val(lat);
$('#lng').val(lng); 

var myLatLng =  new google.maps.LatLng(lat, lng);
gmgeocoder = new google.maps.Geocoder();

gmgeocoder.geocode({'latLng': myLatLng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
            if(results[0].formatted_address.length>64){
                document.getElementById(aElementId).innerHTML = results[0].formatted_address.substring(0,64)+'...';
            }
            else {
                document.getElementById(aElementId).innerHTML = results[0].formatted_address;
            //console.log(results[0].formatted_address);    
            }
        }                   
    }
    else {
        document.getElementById(aElementId).innerHTML = "Geocoder not possible";
    }
 });
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM