본문으로 건너뛰기
  1. Posts/

Hugo 블로그에 shortcode로 Naver map 사용 - 마커 표기

·2 분· loading · loading ·
작성자
Wonyeup Jeong
Developer of Innofactory.

기본 설정
#

  • Hugo 블로그에서 shortcode로 Naver map 사용에 대한 기본 세팅은 아래 페이지 참조

위도와 경도 검색
#

hugo-with-navermap2-1

shortcode 작성
#

hugo-with-navermap2-2

hugo-with-navermap2-3

<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>
<style type ="text/css">
div#map{
width:{{ with .Get "width" }}{{.}}{{else}}500px{{end}};
height:{{ with .Get "height" }}{{.}}{{else}}300px{{end}};
}
</style>
<div class="shortcode shortcode--naver-map">
	<div id="map"></div>
</div>
<script>
var latLng = new naver.maps.LatLng(
		{{ with .Get "latitude" }}{{.}}{{else}}37.46989633428439{{end}}, //위도
		{{ with .Get "longitude" }}{{.}}{{else}}127.03958808526946{{end}} //경도
	); //Default 이노팩토리 위치
var map = new naver.maps.Map('map', {
    center: latLng, 
	zoom: {{ with .Get "zoom" }}{{.}}{{else}}18{{end}} //초기 zoom
});

var marker = new naver.maps.Marker({
    map: map,
	position: latLng,
	title: '{{ with .Get "locationName" }}{{.}}{{else}}이노팩토리{{end}}' // 툴팁
});

map.setOptions({ //모든 지도 컨트롤 보이기
            scaleControl: true,
            logoControl: true,
            mapDataControl: true,
            zoomControl: true,
            mapTypeControl: true
		});

</script>
  • hugo 디렉토리 중 layouts > shortcodes 하위에 naver-map.html 파일 생성(or 수정)
  • Application key를 입력받거나 Configuration 파일에 등록한 property를 사용함
  • map 관련 설정들은 입력 받거나 default값이 적용됨
    • 지도 크기 설정 - width, height
    • 지도 및 마커의 위치 설정 - latitude, longitude (위도, 경도)
    • 지도 zoom 설정 - zoom
    • 마커 툴팁 - locationName

참조
#

실제 사용
#

md 파일 수정을 통한 shortcode 사용
#

{{<naver-map width="600px" height="400px" latitude=37.56442726268796 longitude=126.97710228174175 zoom=16 locationName="시청역">}}
  • md 파일에서 원하는 위치에 배치
  • shortcode html 이름을 사용하여 매칭시킴
    • 예시 : naver-map
  • 위도와 경도는 검색한 값을 입력
    • 예시 : 시청역 (37.56442726268796 / 126.97710228174175)

관련 글

Hugo 블로그에 shortcode로 Naver map 사용 - 기본 세팅
·2 분· loading · loading
네이버 API 등록 # 네이버 맵을 사용하기 위해서는 Naver Cloud Platform에 가입하고 Appliction Key를 발급 받아야합니다. Naver Cloud Platform 회원 가입 # NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼 (ncloud.com) 위의 링크로 네이버 클라우드 플랫폼에 접속 우측 상단 회원 가입을 통해 회원 가입 이미 가입된 경우에는 생략 필자는 ‘네이버로 간편 가입’을 통해 가입함 가입완료 후 로그인 Maps 이용 신청 # 이용 신청 화면으로 이동 #
Hugo BlowFish 테마에서 여러 명의 저자 구현하기
·3 분· loading · loading
다수의 블로그 사이트에서 여러 명의 저자들이 활동하는데, Hugo 는 Default Author 라는 단일 저자를 기본으로 제공한다. Blowfish 테마는 하나의 글에 다수의 저자를 지정할 수 있는 멀티 저자 기능을 추가적으로 제공한다. 이 글은 Blowfish 테마에서 제공하는 멀티 저자기능을 중심으로 전개되며, Hugo 의 기본 기능과 충돌되는 부분에 대해서도 언급한다. 저자 생성하기 # 멀티 저자 기능을 사용하려면, 가장 먼저 저자 관련 정보를 json 파일로 만들어, <SITE>/data/authors 디렉터리에 추가해야 한다.