<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=<?=$NAVER_API_KEY?>"></script>

<script type="text/javascript">
<!--
$(function(){ 
 // 마킹 클릭시 레이어 안의 내용 변수를 배열로 정의
 var oMarkerType  = new Array();
 var oMarkerName  = new Array();
 var oMarkerTel  = new Array();
 var oMarkerAddr  = new Array();
 var oMarkerEtc  = new Array();

 

 var oCenterPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037); //기본설정값 (y, x) 좌표 순서 주의
 nhn.api.map.setDefaultPoint('LatLng');
 oMap = new nhn.api.map.Map('naver_map', {
  point : oCenterPoint,
  zoom : 5, // 네이버지도의 초기기본값은 10입니다.
  enableWheelZoom : true,
  enableDragPan : true,
  enableDblClickZoom : false,
  mapMode : 0,
  activateTrafficMap : false,
  activateBicycleMap : false,
  minMaxLevel : [ 3, 12 ], 
  size : new nhn.api.map.Size(800, 500)
 });
 var markerCount = 0;

 // 지도 줌 컨트롤
 var mapZoom = new nhn.api.map.ZoomControl({position : {left:10, top:10}});
 oMap.addControl(mapZoom);

 

// 마커 이미지, 사이즈 설정 마커종류에 따라 추가
 var oSize1 = new nhn.api.map.Size(22, 30);
 var oOffset1 = new nhn.api.map.Size(22, 30);
 var oIcon1 = new nhn.api.map.Icon('/admin/images/map_marker.png', oSize1, oOffset1);

 

 var oSize2 = new nhn.api.map.Size(18, 23);
 var oOffset2 = new nhn.api.map.Size(18, 23);
 var oIcon2 = new nhn.api.map.Icon('/admin/images/map_marker.png', oSize2, oOffset2);
 
 // 마커의 기본 표시 설정
 var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
 var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
 oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
 oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

 infoWindow.attach('changeVisible', function(oCustomEvent) {
  if (oCustomEvent.visible) {
   oLabel.setVisible(false);
  }
 });

 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);
  }
 });

 // 마커 추가
 /*
 * oMarkerType 에 마커의 종류값을 넣으면 정보창의 디자인을 마커 종류값에 따라 다르게 표현이 가능합니다.
 * z-index 값은 마커의 특징에 따라 위에 놓을것과 아래 놓을것을 구분합니다.
 * oMarker 로 시작하는 배열변수를 통해 해당 데이터값을 저장합니다.
 * infoWindow.setContent('') 안에 정보창의 코딩을 넣습니다.
 */

 <!--php 마커 노출될 목록 시작-->
 <?
  $i = 0;
  while($list = mysql_fetch_array($result)){
 ?>
 var oPoint  = new nhn.api.map.LatLng(<?=$list[p_point_y]?>, <?=$list[p_point_x]?>);
 var oMarker  = new nhn.api.map.Marker(oIcon1, {title : '<?=$list[p_name]?>', zIndex : 1});
 
 //변수사용
 oMarkerType[<?=$i?>] = '1';        // 마커타입번호
 oMarkerName[<?=$i?>] = '<?=$list[p_name]?>';
 oMarkerTel[<?=$i?>]  = '<?=$list[p_tel]?>';
 oMarkerAddr[<?=$i?>]  = '<?=$list[p_address]?>';
 oMarkerEtc[<?=$i?>]  = '<?=$list[p_etc]?>';

 oMarker.setPoint(oPoint);
 oMap.addOverlay(oMarker);
 
 <?
   if ($i == 0) {
 ?>
 oMap.setCenter(oMarker.getPoint()); 
 infoWindow.setContent('<DIV id="info<?=$i?>" style="border:1px solid black; margin-bottom:1px; color:black; background-color:white; width:auto; height:auto;">'+           
           '<div style="width:230px; height: 15px; background-color:#0099ff; color:#ffffff; font-size:12px; font-weight: bold !important; padding:10px 5px 10px 5px;">' + oMarkerName[<?=$i?>] +
           '<span class="close" onclick=\'javascript:document.getElementById("info0").style.display="none";\' style="float:right; cursor:pointer;">×</span></div>' +
           '<span style="height:40px; color: #5b5b5b !important; display: inline-block; font-size: 12px !important; letter-spacing: -1px !important; white-space: nowrap !important; padding: 10px 5px 10px 5px !important">' + oMarkerEtc[<?=$i?>] +
          '<span></div>');
 infoWindow.setPoint(oMarker.getPoint());
 infoWindow.setVisible(true);
 infoWindow.setPosition({right : 4, top : 30});
 infoWindow.autoPosition();
 <?
   } 
 ?>
 <?
   $i++;
  } 
 ?>
 

 

 <!--php 마커 노출될 목록 끝-->
  

 oMap.attach('click', function(oCustomEvent) {
  var oTarget  = oCustomEvent.target;
  var oMarkerTitle = oCustomEvent.target.getTitle();
  var oMarkerId;

  // 마커 클릭하면
  if (oTarget instanceof nhn.api.map.Marker) {
   
   // 겹침 마커 클릭한거면
   if (oCustomEvent.clickCoveredMarker) {
    return;
   }
   
   for(i=0; i<oMarkerName.length; i++){

    if(oMarkerName[i]==oMarkerTitle){
     oMarkerId=i;
     break;
    }
   }
      
   oMap.setCenter(oTarget.getPoint());
   // 창의 타입이 여러개일 경우, oMarkerType[oMarkerId] 마커타입 변수로 확인
   if(oMarkerType[oMarkerId]=='2') {
    infoWindow.setContent('<div id="info'+oMarkerId+'" class="window-no">'+
    '<div class="close" onclick=\'javascript:document.getElementById("info'+oMarkerId+'").style.display="none";\'>×</div>'+
    '<h6>'+oMarkerTitle+'</h6>'+
    'A:'+oMarkerAddr[oMarkerId]+'<br>T:'+oMarkerTel[oMarkerId]+'</div>');
    infoWindow.setPoint(oTarget.getPoint());
    infoWindow.setVisible(true);
    infoWindow.setPosition({right : 5, top : 20});
    infoWindow.autoPosition();
   }else{
    infoWindow.setContent('<DIV  id="info'+oMarkerId+'" style="border:1px solid black; margin-bottom:1px; color:black; background-color:white; width:auto; height:auto;">'+
     '<div style="width:250px; height: 15px; background-color:#0099ff; color:#ffffff; font-size:12px; font-weight: bold !important; padding:10px 5px 10px 5px; "> ' + oMarkerName[oMarkerId] +
     '<span class="close" onclick=\'javascript:document.getElementById("info'+oMarkerId+'").style.display="none";\' style="float:right; cursor:pointer;">×</span></div>' +
     '<span style="height:50px; color: #5b5b5b !important; display: inline-block; font-size: 12px !important; letter-spacing: -1px !important; white-space: nowrap !important; padding: 10px 5px 10px 5px !important">' + oMarkerEtc[oMarkerId] + '<span></div>');
    infoWindow.setPoint(oTarget.getPoint());
    infoWindow.setVisible(true);
    infoWindow.setPosition({right : 4, top : 30});
    infoWindow.autoPosition();
   }
   return;
  }
 });

  
});

//-->
</script>

 

<div id="naver_map"></div>

 

원글 : http://apps.kiplayer.gethompy.com/bbs/board.php?bo_table=comm_deve&wr_id=22