24'C 구름 많음
서울 강남구
네이X지도 api v3
네이버는 튜토리얼이나 개발문서가 좀 가독이 불편한 경우가 있는데
(물론 필자의 개발실력이 문제이기도 하지만)
그래서 하나 만들었습니다.
주소를 좌표로 변환후 지도로 출력하는 함수
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=개발자ID&submodules=geocoder"></script>
<div id="map" style="width:100%;height:600px;"></div>
<style>
.iw_inner {padding:10px}
.iw_inner h3 {font-size: 18px; padding-bottom: 7px}
</style>
<script id="code">
//function get_pointer (해당주소,대상지도 id,title) {
function get_pointer (adress,getid,title) {
naver.maps.Service.geocode({
address: adress
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
//return alert('Something wrong!');
console.log('주소에러');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items; // 검색 결과의 배열
// do Something
var x = eval(items[0].point.x);
var y = eval(items[0].point.y);
var HOME_PATH = window.HOME_PATH || '.';
var cityhall = new naver.maps.LatLng(y, x),
map = new naver.maps.Map('map', {
center: cityhall.destinationPoint(0, 500),
zoom: 10
}),
marker = new naver.maps.Marker({
map: map,
position: cityhall
});
var contentString = [
'<div class="iw_inner">',
' <h3>'+title+'</h3>',
' <p>'+adress+'</p>',
'</div>'
].join('');
var infowindow = new naver.maps.InfoWindow({
content: contentString
});
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
infowindow.open(map, marker);
});
}
/* 마커중복 사용안됨 */
get_pointer('대전 중구','map','대전본점');
</script>
소스상에서 api키만 변경해주시고 사용하시면 됩니다
get_pointer('대전 중구','map','대전본점');
함수로 호출하시고 인자값은 순서대로 검색주소 반환할 div id값 마커에 표시할 이름 입니다.