자바스크립트로 주소를 입력하여 위도 경도 가져오기 - 구글 맵 서비스 이용, 지오코딩

자바스크립트로 주소를 입력하여 위도 경도 가져오기 - 구글 맵 서비스 이용, 지오코딩

<div id="locationField">
  <input id="autocomplete" placeholder="주소를 입력하세요~" type="text" style="width:95%; height:30px">
</div>
<input class="field" id="lat" />
<input class="field" id="lng" />
<script src="https://maps.googleapis.com/maps/api/js?key=구글에서 발급받으신 키를 입력하세요&libraries=places&callback=initAutocomplete" async defer></script>

<script>
var placeSearch, autocomplete;
function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
                                      (document.getElementById('autocomplete')),{types: ['geocode']});
  autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
  var place = autocomplete.getPlace();
    document.getElementById("lat").value=place.geometry.location.lat();
    document.getElementById("lng").value=place.geometry.location.lng();
}
</script>

주소를 입력하시고 선택하시면 위도 경도 값이 입력필드에 들어가게 돼요

즐거운 시간 보내세요~