다음지도 API 기본 코딩자료

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=API키&libraries=services"></script>
<script>
 /*
  다음 map 지도 생성
 */
 var container = document.getElementById('mapDaum'); //지도를 담을 영역의 DOM 레퍼런스
 var options = { //지도를 생성할 때 필요한 기본 옵션
  center: new daum.maps.LatLng(35.5438097038, 129.3300917908), //지도의 중심좌표.
  level: 3 //지도의 레벨(확대, 축소 정도)
 };
 var map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴

 // 지도 컨트롤 설정하기 
 var mapTypeControl = new daum.maps.MapTypeControl();    // 지도 타입 컨트롤을 지도에 표시합니다
 map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT); 
 var zoomControl = new daum.maps.ZoomControl();      // 지도 줌 컨트롤을 생성합니다
 map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

 var bizCnt = 0;
 // 마커 이미지의 이미지 주소입니다
 var imageDefaultSrc = "/img/daummap/default_marker.png";
 var imageStarSrc = "/img/daummap/markerStar.png";
 // 마커 이미지의 이미지 크기 입니다
 var imageDefaultSize = new daum.maps.Size(40, 42);
 var imageDefaultOption = {offset: new daum.maps.Point(13, 39)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
    var imageStarSize = new daum.maps.Size(24, 35);

 // 마커 이미지를 생성합니다   
 var markerDefaultImage = new daum.maps.MarkerImage(imageDefaultSrc, imageDefaultSize, imageDefaultOption);
 var markerStarImage = new daum.maps.MarkerImage(imageStarSrc, imageStarSize);

 /*
  다음지도 여러개 마크생성하기
 */
 var positions = [
  {title:'원미니슈퍼',content:'biz_12345',latlng: new daum.maps.LatLng(35.5416807544,129.3058555732)},
  {title:'원스탑할인마트',content:'biz_12346',latlng: new daum.maps.LatLng(35.5457509324,129.3478100932)},
  {title:'세븐일레븐시청중앙점',content:'biz_12347',latlng: new daum.maps.LatLng(35.5398750445,129.3113116098)},
  {title:'뉴빅세일마트',content:'biz_12348',latlng: new daum.maps.LatLng(35.5409350173,129.2617052646)},
  {title:'S마켓무거점',content:'biz_12349',latlng: new daum.maps.LatLng(35.5520153485,129.2549334128)},
  {title:'자연애달동점',content:'biz_12350',latlng: new daum.maps.LatLng(35.5341392569,129.3215134973)},
  {title:'모닝후레쉬65호(정남마트)',content:'biz_12351',latlng: new daum.maps.LatLng(35.5254487862,129.3179872183)},
  {title:'울산원예농협',content:'biz_12352',latlng: new daum.maps.LatLng(35.5575966747,129.2540620956)},
  {title:'GS25 달동중앙점',content:'biz_12353',latlng: new daum.maps.LatLng(35.5368649513,129.3141575683)},
  {title:'플러스마트',content:'biz_12354',latlng: new daum.maps.LatLng(35.543807272,129.3143174111)},
  {title:'윈한솔마트',content:'biz_12355',latlng: new daum.maps.LatLng(35.5423054342,129.3348152868)},
  {title:'세븐달동제일점',content:'biz_12356',latlng: new daum.maps.LatLng(35.5343521069,129.3222515946)},
  {title:'영남유통',content:'biz_12357',latlng: new daum.maps.LatLng(35.5427666194,129.3221370733)},
  {title:'한빛마트',content:'biz_12358',latlng: new daum.maps.LatLng(35.5446749138,129.3521621992)},
  {title:'미소마트',content:'biz_12359',latlng: new daum.maps.LatLng(35.5300000517,129.3184091872)},
  {title:'우리들근린공원점',content:'biz_12360',latlng: new daum.maps.LatLng(35.5218397501,129.3365322633)},
  {title:'삼원스토아',content:'biz_12361',latlng: new daum.maps.LatLng(35.5483560551,129.2800794805)},
  {title:'씨유달동초이스점',content:'biz_12362',latlng: new daum.maps.LatLng(35.5355949433,129.3392462458)},
  {title:'한양마트',content:'biz_12363',latlng: new daum.maps.LatLng(35.5515878433,129.2640862826)},
  {title:'코사마트울산점',content:'biz_12364',latlng: new daum.maps.LatLng(35.5346839024,129.3285930939)}

 ];
 
 // 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
 var bounds = new daum.maps.LatLngBounds();

 for (var i = 0; i < positions.length; i ++) {
  // 마커를 생성합니다
  var marker = new daum.maps.Marker({
   map: map, // 마커를 표시할 지도
   position: positions[i].latlng, // 마커를 표시할 위치
   title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다   
   image : markerDefaultImage // 마커 이미지
  });

  // 마커에 표시할 인포윈도우를 생성합니다
  var infowindow = new daum.maps.InfoWindow({
   content: positions[i].content // 인포윈도우에 표시할 내용
  });

  // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
  // 이벤트 리스너로는 클로저를 만들어 등록합니다
  // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
  daum.maps.event.addListener(marker, 'click', makeClickListener(map, marker, infowindow, positions[i].latlng));
  // daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

  // LatLngBounds 객체에 좌표를 추가합니다
  bounds.extend(positions[i].latlng);
 } 

 // LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
    map.setBounds(bounds);

 // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
 function makeClickListener(map, marker, infowindow, v_position) {
  return function() {
   var v_chkBizNum = infowindow.getContent();
   var v_chkBizVal = parseInt($('#'+v_chkBizNum).val(),10);
   
   bizCnt++;
   $('#'+v_chkBizNum).val(bizCnt); 
   
   // 커스텀 오버레이이용 선택 마크에 번호 순번적용하기
   var v_content = '<div style="position:absolute; width:30px; height:16px; line-height:16px; left:50%; margin-left:-15px; text-align:center; top:-55px; border-radius:3px; font-weight:600; background-color:#ffffff; border:1px solid #847a7a;">'+bizCnt+'</div>';
   var customOverlay = new daum.maps.CustomOverlay({
    position: v_position,
    content: v_content,
    xAnchor: 0.3,
    yAnchor: 0.91
   }); 
   // 커스텀 오버레이를 지도에 표시합니다
   customOverlay.setMap(map);
   
   marker.setImage(markerStarImage);
   marker.setClickable(false);   
  };
 }

 // 인포윈도우를 닫는 클로저를 만드는 함수입니다
 function makeOutListener(infowindow) {
  return function() {
   infowindow.close();
  };
 }

</script>