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

yizm

4年前

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

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

地図をクリックすると座標と住所が取れます。↓↓↓

住所	lat	lng	コメント
{{ val.address }}	{{ val.lat }}	{{ val.lng }}	{{ val.comment }}

コードは、こんな感じ。

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 });
    }
    
  });
}

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 });

}

});

}