워드프레스로 글을 작성하다보면 지도를 넣어야 할 경우가 생긴다. 네이버, 다음 블로그에서는 쉽게 지도를 넣을 수 있으나 워드프레스는 직접 HTML 코드로 넣거나 플러그인을 사용해야 한다. 이번에는 구글, 카카오, 네이버 지도를 HTML 코드를 이용하여 게시글에 넣는 방법을 소개한다. HTML 코드 방식으로 워드프레스 뿐 아니라 일반 웹사이트에도 적용이 가능하니 참고 바란다.
구글 지도
구글 지도에서 표시하고자 하는 위치를 검색하거나 지도상 위치를 선택 한 후 공유 버튼을 선택한다.
지도 퍼가기를 선택하고 HTML 복사를 선택한다.
워드프레스 편집기에서 사용자 정의 HTML을 선택하고 복사한 코드를 붙여 넣으면 지도 추가가 완료된다.
미리보기를 선택하면 에디터 상태에서 추가된 지도를 확인할 수 있어 편리하다.
카카오맵
카카오맵에서 표시하고자 하는 위치를 검색하거나 지도상 위치를 클릭 한 후 공유 버튼을 선택하고 HTML 태그 복사를 선택한다.
지도크기를 선택한다. 기본 크기는 640×360이며 숫자를 입력하여 크기를 변경할 수 있다. 아이콘 변경에서 아이콘 스타일을 선택한 뒤 소스 생성하기를 선택한다.
일반지도, 이미지지도에서 선택한 후 추가할 코드를 복사한다. 카카오맵에 따르면 일반지도, 이미지지도의 차이점은 다음과 같다.
- 일반지도
지도를 확대, 축소 및 이동할 수 있는 형태입니다. 주로 웹사이트에 사용이 가능하며, 특정 게시판이나 카페/블로그 서비스에서는 지도가 삽입되지 않을 수 있습니다. 그런 경우 이미지 지도를 사용하는 것을 추천드립니다. - 이미지지도
지도를 이미지로 생성하므로 확대, 축소 및 이동할 수 없습니다. 주로 카페/블로그 등 javascript 를 지원하지 않는 환경에서 사용이 가능한 형태입니다. 결과 화면은 보여지는 환경에 따라 차이가 생길 수 있습니다.
워드프레스 편집기에서 사용자 정의 HTML을 선택하고 복사된 코드를 붙여 넣으면 지도 추가가 완료된다.
미리보기를 선택하면 에디터 상태에서 추가된 지도를 확인할 수 있어 편리하다.
네이버 지도
시작하기 전에
네이버 지도를 사용하려면 네이버 클라우드 플랫폼 가입이 필요하다. 사용 회수에 따라 요금이 부과되는데 한달 600만건까지 무료이므로 일반적인 경우 서비스 요금 걱정 없이 사용해도 무방할 듯 하다.
네이버 클라우드 플랫폼 가입 후, Application을 등록하고 Client ID발급 과정이 필요하다.
지도 추가시에는 원하는 위치의 위도와 경도 좌표를 직접 찾아 입력해야 한다. 위도와 경도 좌표는 구글 지도에서 확인이 가능하다.
네이버 클라우드 플랫폼 가입과 Application 등록 등, 구글지도나 카카오맵에 비해 추가시에 좀더 추가적인 작업이 필요 하므로 구글 지도, 카카오맵과 비교하여 번거로움을 넘어선 잇점이 있을 때 사용하면 좋을 듯 하다.
네이버 클라우드 플랫폼에 Application 등록
NAVER CLOUD PLATFORM 사이트에서 지도를 사용할 수 있도록 Application을 등록한다. 네이버 클라우드 플랫폼에 로그인 한 후, 우측 상단에 콘솔을 선택 한다.
콘솔에서 왼쪽 메뉴의 Services를 선택하고 ‘Maps’로 검색한 뒤, Application Services에서 Maps를 선택한다.
Maps에서 Application 등록을 선택한다.
Application이름을 입력하고 API는 Dynamic Map, Web서비스 URL을 입력하고 추가한 뒤 하단 등록 버튼을 선택 한다. WEB서비스 URL은 https:// 또는 http:// 로 시작해야 하고 www는 입력하지 않는다.
참고로 네이버지도 상세기능을 참고하여 웹페이지에서 WebJS를 이용하여 패닝, 줌 인, 줌 아웃 등이 가능한 동적 지도를 사용하기 위해서 Dynamic Map을 선택하였다.
다음과 같이 등록된 Application이 표시되고 API의 당일 및 당월 사용량과 등록 일시 등이 표시된다. 인증 정보를 클릭하면 인증 정보를 확인할 수 있다.
웹에서 네이버 지도를 추가할 때, 인증 정보에서 Client ID를 사용하게 된다.
네이버 지도 추가
네이버 지도 API v3 가이드를 참고하여 네이버 지도를 표시하는 코드는 다음과 같다. 앞서 네이버 클라우드 플랫폼에 Application 등록에서의 인증정보에서 Client ID를 코드의 ncpKeyId에 적용한다. 여기서는 cgyze4dvj가 Client ID가 된다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=[네이버 지도 Client ID]"></script>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>워드프레스 편집기에서 사용자 정의 HTML을 선택하고 복사된 코드를 붙여 넣으면 지도 추가가 완료된다.
미리보기를 선택하면 에디터 상태에서 추가된 지도를 확인할 수 있어 편리하다.
NAVER 지도 API v3을 비동기 방식으로 로딩하는 경우는 코드는 다음과 같다. 앞서 설명한 코드보다는 비동기 방식으로 적용하는 것을 추천한다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=[네이버 지도 Client ID]&callback=initMap"></script>
<script type="text/javascript">
var map = null;
function initMap() {
map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
});
}
</script>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>네이버 지도 옵션
지도만 표시하면 밋밋하니까 다양한 네이버 지도 옵션을 사용해서 지도를 돋보이게 해보자. 다음은 네이버 지도에 Zoom 컨트롤을 추가하고, 마커와 함께 마커 선택시에 인포윈도우를 표시하는 코드 이다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=[네이버 지도 Client ID]&callback=initMap"></script>
<script type="text/javascript">
var map = null;
function initMap() {
map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10, // 초기 줌 레벨
minZoom: 8, // 최소 줌 레벨
maxZoom: 16, // 최대 줌 레벨
zoomControl: true, // 줌 컨트롤의 표시 여부
zoomControlOptions: { // 줌 컨트롤의 옵션
style: naver.maps.ZoomControlStyle.SMALL, // LARGE : 확대/축소/슬라이드버튼, SMALL:확대/축소
position: naver.maps.Position.TOP_RIGHT, // 줌 컨트롤 배치 위치
},
});
// 마커
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.3595704, 127.105399),
map: map
});
// 인포윈도우
var infowindowtext = [
'<div style="padding:5px; text-align: center; ">',
' <p style="font-size: 12px; font-weight: bold; margin: 0;">NAVER 그린팩토리</p>',
' <p style="font-size: 10px; margin: 0;">경기 성남시 분당구 불정로 6</p>',
'</div>'
].join('');
var infowindow = new naver.maps.InfoWindow({
content: infowindowtext,
maxWidth: 200,
height: 50,
backgroundColor: "white",
borderColor: "black",
borderWidth: 1,
disableAnchor: true,
textAlign: "center",
margin: "auto",
pixelOffset: new naver.maps.Point(0, -5)
});
// 마커 클릭시 인포윈도우 표
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
}
</script>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>네이버 지도에 옵션을 적용한 지도 모습은 다음과 같다.
구글 지도를 이용하여 위도 경도 찾기
네이버지도를 표시할 때 중심지점 또는 위치 마커를 표시하려면 해당 위치의 위도와 경도 확인이 필요하다. 네이버지도에서는 위도, 경도를 알 수 없으므로 구글 지도를 이용하여 위도와 경도를 확인한다.
구글지도에서 원하는 위치를 우클릭한 후, 이 위치 공유를 선택하면, 공유 화면에서 위도와 경도를 확인할 수 있다.
구글 지도, 카카오맵, 네이버 지도 비교
각 지도들을 비교, 사용해 볼 수 있도록 구글 지도, 카카오맵, 네이버 지도를 추가해 보았다.
구글지도
카카오맵 일반지도
카카오맵 이미지지도
네이버 지도
마치며
구글 지도와 카카오맵은 HTML 코드 추가로 간단하게 추가가 가능하다. 네이버 지도의 경우 네이버 클라우드 플랫폼 가입 및 Application 등록, 위도 경도 좌표확인 등, 좀더 번거로운 과정이 선행되어야 한다.
각 지도마다 장단점이 있으므로 추가 방법 및 각각의 특징을 비교해보아 가장 적합한 지도를 선택하여 사용하기 바란다.
네이버 지도의 경우 워드프레스 플러그인이 있다고 하니 다음에 사용해 보고 리뷰를 남길 예정이다. 좋은 네이버 지도 플러그인이 있다면 추천 부탁 드린다.