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

기본 설정 #

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

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

  2023년 8월 21일·2 초· 0 · 0

  wjeong

  hugo shortcode navermap

  네이버 API 등록 # 네이버 맵을 사용하기 위해서는 Naver Cloud Platform에 가입하고 Appliction Key를 발급 받아야합니다. Naver Cloud Platform 회원 가입 # NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼 (ncloud.

위도와 경도 검색 #

• 위도/경도 검색 사이트
  • 위도경도 찾기 (esran.com)
  • GPS Geoplaner - GeoConverter | Routeplanner online
• 원하는 사이트에서 지도를 클릭하여 위도/경도를 검색
  • 예시 : 시청역 (37.56442726268796 / 126.97710228174175)

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

참조 #

• 네이버맵 마커 API
  • 마커 | 네이버 지도 API v3 (navermaps.github.io)

실제 사용 #

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)