Como obter o endereço formatado de um marcador arrastado no Google Version Maps

Eu fiz um mapa do Google que permite inserir um endereço em um campo de texto. Em seguida, navega até o endereço typescript no campo de texto e deixa um marcador arrastável que, quando arrastado, mostra o Lat and Long eo The Geolocated Address.

Eu, em vez de exibir o endereço acima, gostaria de arrastar o marcador para exibir no canto inferior o endereço do marcador e não o endereço inserido no campo de texto.

Eu tentei uma série de methods sem sucesso. lonlat [0] .formatted_address estava entre algumas das coisas que eu tentei.

Recebi minha referência do Google

Meu código está abaixo:

    Google Maps JavaScript API v3 Example: Geocoding Simple    var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, draggable: true, position: results[0].geometry.location }); // Javascript// google.maps.event.addListener(marker, 'dragend', function(evt){ document.getElementById('current').innerHTML = '

Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '

'; }); google.maps.event.addListener(marker, 'dragstart', function(evt){ document.getElementById('current').innerHTML = '

Currently dragging marker...

'; }); google.maps.event.addListener(marker, 'dragend', function(evt){ document.getElementById('info').innerHTML = '

Address: ' + results[0].formatted_address + '

'; }); google.maps.event.addListener(marker, 'dragstart', function(evt){ document.getElementById('info').innerHTML = '

Currently dragging marker...

'; }); map.setCenter(marker.position); marker.setMap(map); } else { alert("Geocode was not successful for the following reason: " + status); } }); } #controls { position: absolute; bottom: 1em; left: 100px; width: 400px; z-index: 20000; padding: 0 0.5em 0.5em 0.5em; } html, body, #map_canvas { margin: 0; width: 100%; height: 100%; }
Nothing yet...
Address:

Você precisa usar o serviço de geocodificação reversa (conforme demonstrado no exemplo vinculado) para recuperar o endereço formatado.

Esse código desse exemplo chama o geocoder reverso e usa a resposta para exibir o formatted_address retornado por ele:

 function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } 

Este é o ouvinte do dragend que o chama:

  google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); 

Aqui está um exemplo de trabalho (coloca o endereço recebido do geocoder reverso no infowindow)

fragment de código:

 var geocoder; var map; var marker; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); } function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { marker.formatted_address = responses[0].formatted_address; } else { marker.formatted_address = 'Cannot determine address at this location.'; } infowindow.setContent(marker.formatted_address + "
coordinates: " + marker.getPosition().toUrlValue(6)); infowindow.open(map, marker); }); } function codeAddress() { var address = document.getElementById('address').value; geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); if (marker) { marker.setMap(null); if (infowindow) infowindow.close(); } marker = new google.maps.Marker({ map: map, draggable: true, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'dragend', function() { geocodePosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'click', function() { if (marker.formatted_address) { infowindow.setContent(marker.formatted_address + "
coordinates: " + marker.getPosition().toUrlValue(6)); } else { infowindow.setContent(address + "
coordinates: " + marker.getPosition().toUrlValue(6)); } infowindow.open(map, marker); }); google.maps.event.trigger(marker, 'click'); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } google.maps.event.addDomListener(window, "load", initialize);
 html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } }