↓본문으로 건너뛰기
이노팩토리 블로그
  1. Posts/

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

·2 초· 0 · 0 ·
wjeong
hugo shortcode navermap
목차

네이버 API 등록 #

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

Naver Cloud Platform 회원 가입 #

hugo-with-navermap1

hugo-with-navermap2

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

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

Maps 이용 신청 #

이용 신청 화면으로 이동 #

hugo-with-navermap3

hugo-with-navermap4

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

이용 신청 #

hugo-with-navermap6

hugo-with-navermap7

  • Application 이름 입력
  • Maps 항목에서 이용을 원하는 항목 선택
  • 이용할 서비스 환경을 등록
    • URL 입력 후 추가 버튼 클릭
    • URL중 www는 생략해야함

Application Key 확인 #

hugo-with-navermap8

hugo-with-navermap9

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

설정 및 소스 #

Hugo Configure파일에 Application Key 등록 #

hugo-with-navermap10

hugo-with-navermap11

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

Shortcode 작성 #

hugo-with-navermap13

hugo-with-navermap12 

<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">|}}