ふと思い立ち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