네이버 맵 (기본 맵 + 마커) v3
Open API/Naver2016. 12. 20. 17:59
반응형
네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )
Test Url : http://www.uhoon.co.kr/test/995.html
네이버 API 키 발급 Url : https://dev.naver.com/openapi/register
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>네이버 맵 마커 </title>
<style>v\:* { behavior: url(#default#VML); }</style>
<!-- prevent IE6 flickering -->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버맵키"></script>
</head>
<body>
<div id = "naverMap" style="border:1px solid #000; width:700px; height:400px; margin:20px; display:block;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.7396101, 127.0623053);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naverMap', {
center : oPoint,
level : 10, // 줌 초기 값 10.
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
activateRealtyMap : true,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(500, 400)
});
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
// 마커 찍기
var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '유느님이 계신 곳 ' }); //마커 생성
oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
oMap.addOverlay(oMarker1); //마커를 지도위에 표현
//라벨 넣기
var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
</script>
</body>
</html>
댓글()
