ふと思い立ちGoogleMapAPIで遊ぶ(MarkerClass, GeocoderClass)
google map 上でクリックを行いMaker設置、そのMakerの緯度経度と住所(リバースジオコーディング)するサンプルJS
サンプルの実装やブログは多いがGoogleドキュメントがすぐにヒットしなかったので備忘
読み込みのjsにclick イベントを設置
google.maps.event.addListener(map, 'click', function(event) { if (Marker){Marker.setMap(null)}; Marker = new google.maps.Marker({ position: event.latLng, draggable: true, map: map }); infoTable(Marker.getPosition().lat(), Marker.getPosition().lng(), map.getZoom() ); geocode(); });
geocode()の中でリバースジオコーディング実施
function geocode() { const geocoder = new google.maps.Geocoder(); geocoder.geocode( {'location': Marker.getPosition()}, function(results, status){ if (status === google.maps.GeocoderStatus.OK && results[0]){ document.getElementById('id_address').innerHTML = results[0].formatted_address; } else { document.getElementById('id_address').innerHTML = "GeoCode request fail reason" + status ; } } ) }
Googleドキュメント参照 Maker Class https://developers.google.com/maps/documentation/javascript/reference/marker#Marker
Geocoder Class https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=en#Geocoder