ETC

카카오맵 설정

초기 세팅 시 지도가 노출되지 않습니다.
아래 내용 참고하여 작업을 진행해주세요.

1. 카카오 API KEY 발급
2. 스크립트에서 발급받은 앱키로 수정
3. 스크립트에서 주소, 회사명 수정

<!-- 카카오맵 스크립트
============================================= -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은앱키&libraries=services"></script>
<script>
        var mapContainer = document.getElementById('sub-map'), // 지도를 표시할 div
          mapOption = {
            center: new daum.maps.LatLng(33.450701, 126.570667),
            level: 3 // 지도의 확대 레벨
          };
        // 지도를 생성합니다
        var map = new daum.maps.Map(mapContainer, mapOption);
        // 주소-좌표 변환 객체를 생성합니다
        var geocoder = new daum.maps.services.Geocoder();
        // 주소로 좌표를 검색합니다
        geocoder.addressSearch('서울 중구 세종대로 110', function(result, status) { // 지도의 주소
          // 정상적으로 검색이 완료됐으면
          if (status === daum.maps.services.Status.OK) {
            var coords = new daum.maps.LatLng(result[0].y, result[0].x);
            // 커스텀 오버레이에 표시할 내용입니다     
            // HTML 문자열 또는 Dom Element 입니다 
            var content = '<div class ="map-pin">디자인야미</div>';
            // 커스텀 오버레이가 표시될 위치입니다 
            var position = coords
            // 커스텀 오버레이를 생성합니다
            var customOverlay = new daum.maps.CustomOverlay({
              position: position,
              content: content
            });
            // 커스텀 오버레이를 지도에 표시합니다
            customOverlay.setMap(map);
            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
            map.relayout();
          }
        });
</script>

카카오맵 Key 발급하기

카카오맵 API를 사용하기 위해서는 먼저 카카오 개발자 웹사이트에 로그인해야 합니다.
다음 단계를 따라 앱키를 발급받을 수 있습니다

  1. 카카오 개발자 웹사이트(https://developers.kakao.com/)에 로그인합니다.
  2. “내 애플리케이션” 메뉴에서 “애플리케이션 추가하기”를 클릭합니다.
  3. 애플리케이션 정보를 입력하고, “앱 만들기”를 클릭합니다.
  4. 앱 만들기가 완료되면, 생성된 앱의 “앱 설정” 메뉴에서 “플랫폼” 탭으로 이동합니다.
  5. 플랫폼 추가를 클릭하고, “Web”을 선택합니다.
  6. “사이트 도메인” 항목에는 카카오맵을 사용할 도메인을 등록합니다. (예: localhost, mydomain.com 등)
  7. “웹 플랫폼” 항목에서 “사이트 URL”에는 카카오맵을 사용하는 페이지의 URL을 입력합니다.
  8. “JavaScript 키” 항목에서 “생성하기”를 클릭하여 앱키를 발급받습니다.

지도가 노출되지 않나요?

  • HTML , SCRIPT 는 동일한 페이지에 포함되는지
  • HTML, SCRIPT 의 id 값은 동일한지
  • 플랫폼에 도메인이 정상적으로 등록되었는지