네이버 지도 API 예시
<!DOCTYPE html ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<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=b2d8f0f95a64bedbe63e7c771978e374"></script>
<link type="text/css" rel="stylesheet" href="http://static.naver.com/openapi_map/maps_openapi.css">
<body>
<!-- 네이버지도 div 시작 -->
<div id = "classMap" class="geoDiv" style=" width:740px; height:400px; margin: 20px 1px;"></div>
<!-- 네이버 지도 div 끝 -->
<!-- 네이버 지도 스크립트 시작 -->
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(35.8375553, 127.0575632);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map(document.getElementById('classMap'),{
point : oPoint,
zoom : 11,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(740, 400)
});
// 줌 컨트롤러
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({ top:15, left:15 });
//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
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);
//icon 이미지를 바꿔서 사용할 수 있습니다.
var oMarker = new nhn.api.map.Marker(oIcon, { title : '더클래식 호텔' });
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
// 마커라벨 표시
var oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언
oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨
oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기
oLabel1.setPosition({ top : 0, left :0 });
</script>
<!-- 네이버 지도 스크립트 끝 -->
</body>
</html>
결과 ==============================================
'UIUX퍼블리셔 > Html \ Css \ Jquery' 카테고리의 다른 글
| 재밋는 효과 스크롤 (0) | 2015.09.11 |
|---|---|
| 네이버 지도 오류 replace (0) | 2015.07.21 |
| 귀여운 Tree Animated (0) | 2015.04.01 |
| 귀여운 SVG ㅎㅎㅎ (0) | 2015.04.01 |
| 예쁜 Slider (0) | 2015.04.01 |
