地図クリックでlatLngと住所を取得(Google Maps & Geocoding)

今度は地図をクリックしたら、クリックされた場所にマーカーを付けてその場所の経度・緯度と住所を取得してリストに追加してみる。

地図クリックで座標と住所を取得

コードは、こんな感じ。

var app = new Vue({
  el: "#input-form",
  data: {
      adrs_list: []
    }
});

var map = new google.maps.Map(document.getElementById('gmap'), {
  center: {lat: 43.0553626, lng: 141.341062},
  zoom: 12,
  mapTypeId: 'roadmap'
});

map.addListener('click', function(e){
  map.panTo(e.latLng);
  getAddress(e.latLng);
});

function getAddress(latlng) {
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({
    latLng: latlng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0].geometry) {
        var address = results[0].formatted_address.replace(/^日本(、|,)/, '');
        app.adrs_list.push({address: address, lat: latlng.lat(), lng: latlng.lng(), comment: ""});
        var marker = new google.maps.Marker({ position: latlng,map: map ,title: address ,animation: google.maps.Animation.DROP });
      }
    } else {
      app.adrs_list.push({address: "", lat: latlng.lat(), lng: latlng.lng(), comment: status });
    }
    
  });
}