マップ上のマーカーをドラッグして、中心点の座標を取得します。そこから「住所を取得」で、Geocoder オブジェクトに位置情報を渡し、GeocoderResults オブジェクトを取得します。
地図上のマーカーをドラッグして東経北緯の位置情報を取得する処理は 地図上のマーカーを動かして東経北緯を取得する を参考にしてください
まずは地図の描画とあわせて、Geocoder オブジェクトを作成します。
var geocoder = new google.maps.Geocoder;
document.getElementById("submit-reverse-geocoding").addEventListener("click", function() {
geocodeLatLng(geocoder, map);
});あとは、東経北緯の情報をGeocoder オブジェクトに位置情報を渡すと、勝手に GeocoderResults オブジェクトが返ってきます。
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
document.getElementById("result-reverse-geocoding").innerHTML = JSON.stringify(results, null , " ");
console.log(results);
} else {
window.alert('Geocoder failed due to: ' + status);
}
});まとめると以下のとおり。
<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<input type="text" name="lat" id="lat" placeholder="00.0000" value="35.658620">
<input type="text" name="lng" id="lng" placeholder="000.0000" value="139.745417">
<button type="button" id="submit-reverse-geocoding">住所を取得</button>
<textarea id="result-reverse-geocoding">ここにレスポンス(JSON)が表示されます</textarea>
<script type="text/javascript">
function initMap() {
var myLatlng = {lat: 35.658620, lng: 139.745417};
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 16,
center: myLatlng,
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
});
google.maps.event.addListener(marker, "dragend", function() {
outputLatLng(marker.getPosition());
map.panTo(marker.getPosition());
});
outputLatLng(marker.getPosition());
var geocoder = new google.maps.Geocoder;
document.getElementById("submit-reverse-geocoding").addEventListener("click", function() {
geocodeLatLng(geocoder, map);
});
}
function outputLatLng(latlng) {
document.getElementById("lat").value = latlng.lat();
document.getElementById("lng").value = latlng.lng();
}
function geocodeLatLng(geocoder, map) {
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
document.getElementById("result-reverse-geocoding").innerHTML = JSON.stringify(results, null , " ");
console.log(results);
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>