다음 지도 API

다음 지도 API

---

<!-- HTML -->
<div id="map" style="width: 100%; height: 27.3vw;"></div>
 
<!-- JavaScript -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP_KEY&libraries=services"></script>
 
/** ===== Daum Map Api ===== */
// 주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
 
var gap = "주소값 넣기"; // Ex) 서울 강남구 ~~
var lat = ""; // 위도
var lng = ""; // 경도
var compName = ""; // 마커 title 표시 값
 
// 주소로 좌표를 검색
geocoder.addressSearch(gap, function(result, status) {
  // 정상적으로 검색이 완료됐으면,
  if (status == daum.maps.services.Status.OK) {
    var coords = new daum.maps.LatLng(result[0].y, result[0].x);
 
    lat = result[0].y;
    lng = result[0].x;
  }
 
  var mapContainer = document.getElementById('map'); // 지도를 표시할 div
  var mapOption = {
      center: new daum.maps.LatLng(lat, lng), // 지도의 중심좌표
      level: 3 // 지도의 확대 레벨
  };
 
  var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
  /** 라이브러리 기능 추가 시작 */
  // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
  var mapTypeControl = new kakao.maps.MapTypeControl();
 
  // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
  // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
  map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
 
  // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
  var zoomControl = new kakao.maps.ZoomControl();
  map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
 
  // 마커를 표시할 위치와 title 객체 배열입니다
  var position = {
      title: compName,
      latlng: new daum.maps.LatLng(lat, lng)
  };
 
  // 마커 이미지의 이미지 주소입니다
  var imageSrc = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
 
  // 마커 이미지의 이미지 크기 입니다
  var imageSize = new daum.maps.Size(24, 35);
 
  // 마커 이미지를 생성합니다
  var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
 
  // 마커를 생성합니다
  var marker = new daum.maps.Marker({
      map: map, // 마커를 표시할 지도
      position: position.latlng, // 마커를 표시할 위치
      title : position.title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
      image : markerImage // 마커 이미지
  });
 
  // 마커에 클릭이벤트를 등록합니다
  daum.maps.event.addListener(marker, 'click', function() {
      //장소 ID가 있다면 map/장소ID
      //위도, 경도로 검색
      window.open("http://map.daum.net/link/map/" + lat + "," + lng);
  });
});