네이버지도 샘플

<script src='/nam_js/jquery-1.11.0.min.js'></script>
<script src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId=N3ZaqkcVHSWF22115eQL"></script>
<script>
 var map;
 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 latlng0 = new nhn.api.map.LatLng(35.5371815, 129.3428428);
 
 var w = 827, h = 550;
 w = $(window).width() - 95;
 h = $(window).height() - 50;

 function mapLoad(){
  map = new nhn.api.map.Map("map_canvas", {

    point : latlng0,      // 지도 중심점의 좌표
    zoom : 13,        // 지도의 축척 레벨
    // boundary : Array     // 지도 생성 시 주어진 array에 있는 점이 모두 보일 수 있도록 지도를 초기화한다.
    // boundaryOffset : Number    // boundary로 지도를 초기화 할 때 지도 전체에서 제외되는 영역의 크기.
    enableWheelZoom : true,    // 마우스 휠 동작으로 지도를 확대/축소할지 여부
    enableDragPan : true,     // 마우스로 끌어서 지도를 이동할지 여부
    enableDblClickZoom : false,   // 더블클릭으로 지도를 확대할지 여부
    mapMode : 0,       // 지도 모드(0 : 일반 지도, 1 : 겹침 지도, 2 : 위성 지도)
    activateTrafficMap : false,   // 실시간 교통 활성화 여부
    activateBicycleMap : false,   // 자전거 지도 활성화 여부
    minMaxLevel : [ 1, 14 ],    // 지도의 최소/최대 축척 레벨
    size : new nhn.api.map.Size(w, h) // 지도의 크기
    // detectCoveredMarker : Boolean   // 겹쳐 있는 마커를 클릭했을 때 겹친 마커 목록 표시 여부
  });

  // 기본 컨트롤 설정...
  var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
  var mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
  mapTypeChangeButton.setPosition({top:10, left:50}); // - 지도 타입 버튼 위치 지정
  mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
  map.addControl(mapZoom);
  map.addControl(mapTypeChangeButton);

  // Marker 등록
  var oMarker = new nhn.api.map.Marker(oIcon, { title : "삼산1" });
  oMarker.setPoint(latlng0);
  map.addOverlay(oMarker);

  var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
  mapInfoTestWindow.setContent("<DIV style='border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;'>"+
    "<span style='color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 2px 2px 2px !important'>" +
    "삼산1 <br /> "+"<span></div>");
  mapInfoTestWindow.setPoint(latlng0);
  mapInfoTestWindow.setVisible(true); // - infowindow 표시 여부 지정.
  map.addOverlay(mapInfoTestWindow); // - 지도에 추가. 
  

  // Polygon 설정...
  var oPolygon = new nhn.api.map.Polygon([

       new nhn.api.map.LatLng(35.5376223, 129.3423125),
       new nhn.api.map.LatLng(35.5375342, 129.3433583),
       new nhn.api.map.LatLng(35.5367637, 129.3433406),
       new nhn.api.map.LatLng(35.5367433, 129.3423177),
   ]);
   oPolygon.setStyle({ strokeColor : '#FF0000',
       strokeStyle : 'solid',
       fillOpacity : 0.2
   });

   map.addOverlay(oPolygon);
  
  
 }

 $(document).ready(function(){  
  mapLoad(); 
  
  $(window).resize(function() {
     w = $(window).width()  - 95;
     h = $(window).height() - 50;
     map.setSize(new nhn.api.map.Size(w, h));
  });

  var v_map_menu = $("[id^='map_menu_']");
  v_map_menu.click(function(event){
   var v_selMenu = $(this).attr('id').replace('map_menu_','');
   map.setCenter(eval('latlng' + v_selMenu));
   event.preventDefault();
  });
 });
 
</script>
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="map_wrap">
 <div id="map_menu_0" style="cursor:pointer;cursor:hand;">
  <span class="" id="menu_title_0"><strong>삼산1</strong></span>
 </div>
 
</div>