2022.12.14 - [정보기술] - (1) 구글 지도 API – 지도 만들기
2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기
2022.12.14 - [정보기술] - (3) 구글 지도 API - 다중 마커 표시하기
2022.12.14 - [정보기술] - (4) 구글 지도 API - 정보창 표시하기
2022.12.14 - [정보기술] - (5) 구글 지도 API - 자동완성주소 검색하기
2022.12.14 - [정보기술] - (6) 번외 - 자동완성주소 검색에 관하여
2022.12.14 - [정보기술] - (7) 구글 지도 API - 특정 주소의 좌표 확인하기
2022.12.14 - [정보기술] - (8) 구글 지도 API - 좌표 DB 등록하기
2022.12.14 - [정보기술] - (9) 구글 지도 API - 검색 인터페이스 구현
2022.12.14 - [정보기술] - (10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식)
2022.12.14 - [정보기술] - (11) 구글 지도 API - 좌표 DB 불러오기 (xml 이용)
2022.12.14 - [정보기술] - (12) 구글 지도 API - 위치기반 서비스 제공 (끝)
본 포스팅은 구글 지도 API를 이용하여 자동완성검색 주소의 좌표를 확인하는 스크립트에 대한 내용입니다.
지난번 포스팅에서 이어지는 내용으로 장소명과 주소, 그리고 위도와 경도에 대한 내용을 확인하는 방법에 대해 설명합니다. 먼저 스크립트 전문과 실행결과를 확인하시기 바랍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
</style>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.5546788, lng: 126.9706069},
zoom: 15
});
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
var types = document.getElementById('type-selector');
var strictBounds = document.getElementById('strict-bounds-selector');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autocomplete = new google.maps.places.Autocomplete(input);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo('bounds', map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(
['address_components', 'geometry', 'icon', 'name']);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
document.getElementById('latclick').value = marker.getPosition().lat();
document.getElementById('lngclick').value = marker.getPosition().lng();
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
document.getElementById('address').value = address;
document.getElementById('place_name').value = place.name;
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
document.getElementById('use-strict-bounds')
.addEventListener('click', function() {
console.log('Checkbox clicked! New state=' + this.checked);
autocomplete.setOptions({strictBounds: this.checked});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
defer></script>
</head>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autocomplete search
</div>
<div id="type-selector" class="pac-controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-strict-bounds" value="">
<label for="use-strict-bounds">Strict Bounds</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<div>
위도<input type="text" id="latclick" name="latclick" value="">
경도<input type="text" id="lngclick" name="lngclick" value="">
주소<input type="text" id="address" name="address" value="">
장소<input type="text" id="place_name" name="place_name" value="">
</div>
</body>
</html>
지난번과 동일합니다. 추가된 내용은 다음 단 4줄입니다.
document.getElementById('latclick').value = marker.getPosition().lat();
document.getElementById('lngclick').value = marker.getPosition().lng();
document.getElementById('address').value = address;
document.getElementById('place_name').value = place.name;
단 네 줄을 추가하여 검색된 장소의 위도와 경도, 그리고 주소와 장소명을 불러올수 있게 되었습니다.
해당 값들은 body의 input에 표시되게 되고 이를 type=”hidden”으로 숨길 수 있으며 input 태그에 의해 id가 결정되었기 때문에 request.getParameter 등의 구문을 통해 Form 제출시 DB나 다른 JavaScript 문서로 넘기는 것이 가능해집니다.
address나 place.name은 이미 본문에서 선언된 변수이기 때문에 생략합니다.
marker.getPosition().lat()과 marker.getPosition().lng()가 핵심입니다.
구글 지도 API에서는 marker에서의 위치를 getPosition()이라는 함수를 통해 불러올수 있으며 이 때 위도와 경도는 각각 lat()와 lng()로 정의됩니다.
이 방법을 응용하면 DB에 업로드 하기위한 특정장소의 정보등을 추출할 수 있으며 반대로, 위치정보 서비스를 제공할 때 기준점이 되는 위치 등을 설정할 수 있게 됩니다.
2022.12.14 - [정보기술] - (8) 구글 지도 API - 좌표 DB 등록하기
(8) 구글 지도 API - 좌표 DB 등록하기
2022.12.14 - [정보기술] - (1) 구글 지도 API – 지도 만들기 2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기 2022.12.14 - [정보기술] - (3) 구글 지도 API - 다중 마커 표시하기 2022.12.14 - [정보
iftraveler.tistory.com
'정보기술' 카테고리의 다른 글
| (9) 구글 지도 API - 검색 인터페이스 구현 (0) | 2022.12.14 |
|---|---|
| (8) 구글 지도 API - 좌표 DB 등록하기 (0) | 2022.12.14 |
| (6) 번외 - 자동완성주소 검색에 관하여 (0) | 2022.12.14 |
| (5) 구글 지도 API - 자동완성주소 검색하기 (0) | 2022.12.14 |
| (4) 구글 지도 API - 정보창 표시하기 (0) | 2022.12.14 |
댓글