네이버 맵 (기본 맵 + 마커)

네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )

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>

네이버 맵 (기본 맵 + 마커)

단축키

Articles