네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기
Javascript 예제 2014. 4. 29. 11:11
네이버 지도에 커스텀 버튼을 넣을라고 공식 API 문서를 디벼보면서 추가해 볼려고 했더니 생각대로 잘 넣어지지 않았다 -.-
구글님에게 이것저것 디벼보면서 커스텀 버튼을 뽓 넣었다. API 문서좀 잘 맹글어 주지하는 아쉬움은 있지만 뭐 어쩌나~~
버튼을 쪽바로 넣기 위해서는 <div style="position: absolute;"></div> 로 버튼을 한번 뽓 감싸줘야 된다.
솟스
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="http://static.naver.com/openapi_map/maps_openapi.css?13916988001">
<style>
a.btn {
display:inline;padding:7px 12px;background-color:#5cb85c; color:#fff; border:solid 1px #1658a2;
font-weight:bold;text-decoration:none
}
a.btn:hover { color:#cce4ff; border:solid 1px #002651; }
</style>
</head>
<body>
<div id="maptest"></div>
<script>
var map = new nhn.api.map.Map(
document.getElementById('maptest'),
{
point : new nhn.api.map.LatLng(35.710659, 127.883093),
zoom : 2,
mapMode : 0,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(600, 700)
}
);
var btn = new nhn.api.map.CustomControl();
var html = '';
html += '<div style="position: absolute;">';
html += '<a class="btn" target="_blank" href="http://stove99.tistory.com">커스텀 버튼!!</a>';
html += '</div>';
btn.createControl(html, {position:{right:20,top:55}});
map.addControl(btn);
</script>
</body>
</html>
'Javascript 예제' 카테고리의 다른 글
| Javascript 로 초성검색하기 (0) | 2018.06.26 |
|---|---|
| jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
