ETC

카카오맵 설정

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

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

카카오맵 Key 발급하기

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

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

SCRIPT

앱키 / 주소 / 회사명을 수정해주세요.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은앱키를넣으세요&libraries=services"></script>
<script>
  var mapContainer = document.getElementById('고유아이디값'), // 지도를 표시할 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('주소를 변경하세요', 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>

HTML

.map-grayscale 클래스를 추가하면 그레이톤의 맵 구현
.min-vh-40 등 클래스로 유연하게 높이값 설정

<div id="고유아이디값" style="height: 높이값"></div>
<div id="고유아이디값" style="height: 높이값" class="map-grayscale"></div>
<div id="고유아이디값"  class="min-vh-40 map-grayscale"></div>

지도가 노출되지 않나요?

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