티스토리 뷰
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>샘플코드</title>
</head>
<body>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=00149bdae2f36ed5cac45ba0897b2d38"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
//http://map.naver.com/api/geocode.php?key=ac4836e43fc3046ea25c0e7c6db02be3&query=울산광역시 북구 시례동 247-2
var oPoint = new nhn.api.map.TM128(522180, 334652);
var defaultLevel = 11;
var oMap = new nhn.api.map.Map(document.getElementById("map"), {
point : oPoint,
zoom : 8,
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 3, 13 ],
size : new nhn.api.map.Size(600, 400),
detectCoveredMarker : true });
// ZOOM
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({
top : 10,
left : 10
});
// LABEL
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
// MARKER
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 oMarker = new nhn.api.map.Marker(oIcon, { title : "신화블루베리농장 북구 시례동 247-2" });
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
// EVENT
oMap.attach("mouseenter", function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});
oMap.attach("mouseleave", function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에서 마우스 나간거면
if (oTarget instanceof nhn.api.map.Marker) {
oLabel.setVisible(false);
}
});
</script>
</body>
</html>
------------------------------------------------------------------
<!-- 네이버 지도 -->
<IFRAME name="boardMap" src="/map/map.html" frameBorder=0 width=500 height=300 marginWidth=0 marginHeight=0></IFRAME>
------------------------------------------------------------------
KEY 값 등록 및 참고사이트
네이버 개발자센터 :
http://dev.naver.com/openapi/apis/map/javascript/reference
'Language > API' 카테고리의 다른 글
| [ API ] 다음 지도 API - 생성하기 편함 (0) | 2016.01.02 |
|---|---|
| [ API ] G-PIN (0) | 2016.01.02 |