Hugo 블로그에 shortcode로 Naver map 사용 - 기본 세팅

네이버 API 등록

#

네이버 맵을 사용하기 위해서는 Naver Cloud Platform에 가입하고 Appliction Key를 발급 받아야합니다.

Naver Cloud Platform 회원 가입

#

NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼 (ncloud.com)

• 위의 링크로 네이버 클라우드 플랫폼에 접속
• 우측 상단 회원 가입을 통해 회원 가입
  • 이미 가입된 경우에는 생략
  • 필자는 ‘네이버로 간편 가입’을 통해 가입함
• 가입완료 후 로그인

Maps 이용 신청

#

이용 신청 화면으로 이동

#

• 우측 상단 검색 아이콘을 클릭하여 ‘map’을 검색한 뒤 검색 결과 중에 서비스 하위의 ‘Maps’ 열기
• ‘이용 신청하기’ 버튼 클릭하여 이용 신청 화면 열기
• 스크롤을 내려서 Application 등록 클릭

이용 신청

#

• Application 이름 입력
• Maps 항목에서 이용을 원하는 항목 선택
• 이용할 서비스 환경을 등록
  • URL 입력 후 추가 버튼 클릭
    • https://innofactory.net
    • http://localhost:1313 (작성용)
  • URL중 www는 생략해야함

Application Key 확인

#

• Application 등록 완료
• 인증정보를 눌러 Application Key 확인
  • Client ID를 사용함

설정 및 소스

#

• 참조
  • maps.js.ncp/examples at master · navermaps/maps.js.ncp (github.com)

Hugo Configure파일에 Application Key 등록

#

• Hugo Configuration 파일 열기
  • 위 그림은 예시로 위치는 다를 수 있음
• Configuration 파일 최하단에 아래와 같이 추가
  • naverMapApiKey="<발급받은 Client ID>"

Shortcode 작성

#

<script type="text/javascript" src='https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId={{ with .Get "key" }}{{ . }}{{ else }}{{ .Site.Params.params.naverMapApiKey }}{{end}}'></script>
<div class="shortcode shortcode--naver-map">
	<div id="map" style='width:{{ with .Get "width" }}{{.}}{{else}}500px{{end}}; height:{{ with .Get "height" }}{{.}}{{else}}300px{{end}}'>
	</div>
</div>
<script id="code">
//var map = new naver.maps.Map('map');
var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.4696805, 127.04) // 이노팩토리 위치
});
map.setOptions({ //모든 지도 컨트롤 보이기
            scaleControl: true,
            logoControl: true,
            mapDataControl: true,
            zoomControl: true,
            mapTypeControl: true
        });
</script>

• hugo 디렉토리 중 layouts > shortcodes 하위에 naver-map.html 파일 생성

• Application key를 입력받거나 Configuration 파일에 등록한 property를 사용함

• width와 height 값은 입력받은 값이 없을 경우 default값을 사용함

• 네이버 지도를 호출하고 control 옵션을 부여함

사용 예시

#

md 파일 수정

#

• 아래 소스에서 ‘|‘를 제거하고 사용

  • 블로그에서 소스 표기를 위해 ‘|’ 추가함

  {{|< naver-map width="600px" height="400px">|}}