Geocoder 서브 모듈의 Service 객체를 사용하여 주소로 좌표를 검색하거나(Geocode) 좌표로 주소를 검색하는(Reversegeocode) 예제입니다. 입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하며, 지도를 클릭하면 해당 지점의 경위도 좌표로 주소를 검색합니다. Geocode API의 자세한 응답값은Geocode API를 참고하세요. Reversegeocode API의 자세한 응답값은ReverseGeocode API를 참고하세요.
api 를 통해 주소값을 통해서 위치를 지정해 주는 방식이다.
페이지 화면이 로딩되면 searchAddressToCoordinate('정자동 178-1'); 주소 검색값으로 해당 위치로 이동해 준다.
/**
* 스크립트 로드
* <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=geocoder"><\/script>
*/
var map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(37.3595316, 127.1052133),
zoom: 15,
mapTypeControl: true
});
var infoWindow = new naver.maps.InfoWindow({
anchorSkew: true
});
map.setCursor('pointer');
function searchCoordinateToAddress(latlng) {
infoWindow.close();
naver.maps.Service.reverseGeocode({
coords: latlng,
orders: [
naver.maps.Service.OrderType.ADDR,
naver.maps.Service.OrderType.ROAD_ADDR
].join(',')
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
if (!latlng) {
return alert('ReverseGeocode Error, Please check latlng');
}
if (latlng.toString) {
return alert('ReverseGeocode Error, latlng:' + latlng.toString());
}
if (latlng.x && latlng.y) {
return alert('ReverseGeocode Error, x:' + latlng.x + ', y:' + latlng.y);
}
return alert('ReverseGeocode Error, Please check latlng');
}
var address = response.v2.address,
htmlAddresses = [];
if (address.jibunAddress !== '') {
htmlAddresses.push('[지번 주소] ' + address.jibunAddress);
}
if (address.roadAddress !== '') {
htmlAddresses.push('[도로명 주소] ' + address.roadAddress);
}
infoWindow.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 좌표</h4><br />',
htmlAddresses.join('<br />'),
'</div>'
].join('\n'));
infoWindow.open(map, latlng);
});
}
function searchAddressToCoordinate(address) {
naver.maps.Service.geocode({
query: address
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
if (!address) {
return alert('Geocode Error, Please check address');
}
return alert('Geocode Error, address:' + address);
}
if (response.v2.meta.totalCount === 0) {
return alert('No result.');
}
var htmlAddresses = [],
item = response.v2.addresses[0],
point = new naver.maps.Point(item.x, item.y);
if (item.roadAddress) {
htmlAddresses.push('[도로명 주소] ' + item.roadAddress);
}
if (item.jibunAddress) {
htmlAddresses.push('[지번 주소] ' + item.jibunAddress);
}
if (item.englishAddress) {
htmlAddresses.push('[영문명 주소] ' + item.englishAddress);
}
infoWindow.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 주소 : '+ address +'</h4><br />',
htmlAddresses.join('<br />'),
'</div>'
].join('\n'));
map.setCenter(point);
infoWindow.open(map, point);
});
}
function initGeocoder() {
if (!map.isStyleMapReady) {
return;
}
map.addListener('click', function(e) {
searchCoordinateToAddress(e.coord);
});
$('#address').on('keydown', function(e) {
var keyCode = e.which;
if (keyCode === 13) { // Enter Key
searchAddressToCoordinate($('#address').val());
}
});
$('#submit').on('click', function(e) {
e.preventDefault();
searchAddressToCoordinate($('#address').val());
});
searchAddressToCoordinate('정자동 178-1');
}
naver.maps.onJSContentLoaded = initGeocoder;
naver.maps.Event.once(map, 'init_stylemap', initGeocoder);