홈페이지 내 어느 곳에서든 카카오, 구글, 네이버 지도를 자바스크립트 함수로 간편하게 불러올 수 있습니다.

추가 페이지에 지도를 불러오는 방법을 예시로 지도 사용법을 알려 드리겠습니다.

 

추가페이지를 만들기 위해 [디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 에서 페이지 새로 만들기를 클릭하고 본문에 내용을 입력합니다.

 

 

 

 

1. 카카오지도

카카오 지도는 API키를 발급/등록하는 절차 없이 바로 사용할 수 있습니다.

 

주소로 불러오기

 <script>

// 타이틀, 주소, 가로, 세로, 줌

map_kakao_addr("숭례문","서울특별시 중구 세종대로 40",600,400,16);

</script>

 

좌표로 불러오기

 <script>

// 타이틀, 좌표X, 좌표Y , 가로, 세로, 줌

map_kakao_xy("숭례문",37.5599922,126.9753282, 600,400,16);

</script>

 

결과

 

 

2. 구글 지도

구글 지도를 사용하기 위해서는 [프로그램샵 》 프로그램 환경설정 》 외부 API 연동]에서 사전에 발급 받은 API키를 입력해야 합니다.

 

 

 

---

 

구글 지도 API 발급 방법

 

Google Mpas Platform에 접속합니다.

처음이라면 가입을 하셔야 합니다. 가입시 개인정보와 신용카드 정보가 필요합니다.

가입을 완료하면 상단에서 Mpas JavaScript API를 검색 후 클릭합니다.

 

사용 버튼을 클릭합니다.

 

 

API키가 발급되는데 이 API키를 [프로그램샵 》 프로그램 환경설정 》 외부 API 연동]에 입력하시면 됩니다.

그리고 Geocoding API도 검색 후 사용 설정 해야 합니다.

 

 

여기까지 잘 따라 오셨다면 이제 구글 지도를 사용하실 수 있습니다.

 

---

 

주소로 불러오기

 <script>

// 타이틀, 주소, 가로, 세로, 줌

map_google_addr("숭례문","서울특별시 중구 세종대로 40",600,400,16);

</script>

 

좌표로 불러오기

 <script>

// 타이틀, 좌표X, 좌표Y , 가로, 세로, 줌

map_google_xy("숭례문",37.5599922,126.9753282, 600,400,16);

</script>

 

결과

 

 

 

3. 네이버 지도

네이버 지도는 구글 지도와 마찬가지로 [프로그램샵 》 프로그램 환경설정 》 외부 API 연동]에 API키를 입력해야 합니다.

 

 

네이버 지도 API키를 발급하는 방법은 다음 게시글을 참고 바랍니다.

NAVER MAPS Enterprise API 서비스 신청하기

 

 

주소로 불러오기

 <script>

// 타이틀, 주소, 가로, 세로, 줌

naver_map_addr("숭례문","서울특별시 중구 세종대로 40",600,400,16);

</script>

 

좌표로 불러오기

 <script>

// 타이틀, 좌표X, 좌표Y , 가로, 세로, 줌

naver_map_xy("숭례문",37.5599922,126.9753282, 600,400,16);

</script>

 

결과

 

 

 

이것으로 추가 페이지에서 카카오, 구글, 네이버 지도를 사용하는 방법에 대해서 마칩니다.

추가 페이지 뿐만 아니라 다른 페이지에서도 사용할 수 있으므로 매뉴얼을 참고해서 시도 바랍니다.

 

 

 

 

추가) 디자인팜 2.0

디자인팜 2.0에서 지도를 추가하고 다른 지도로 변경하는 방법에 대해서 알려 드리겠습니다.

먼저 좌측 컨텐츠에서 지도를 드래그하여 추가합니다.

 

 

마커에 표시할 이름과 주소를 입력한 다음, 적용하게 되면 기본적으로 카카오 지도가 표시됩니다.

 

 

결과

 

여기서 구글 지도나 네이버 지도로 변경하고 싶다면 우측 상단의 소스수정을 클릭합니다.

 

 

다른 부분은 건너 뛰고 HTML (실제 설치 소스)에서

<div id="google_map__1053945__" style="height:{$farm_set[height_pc]}px;"></div> 코드를

<iframe id="google_map__1053945__" style="height:{$farm_set[height_pc]}px;" frameborder="0" scrolling="no"></iframe> 으로 수정합니다.

 

 

그리고 JS 하단에서 첫 줄만 남기고 모두 삭제한 뒤 함수를 추가합니다.

네이버 지도라면 naver_map_addr("{$farm_set[company]}","{$farm_set[addr][ori_text]}",600,400,16, map_id);

구글 지도라면 google_map_addr_load("{$farm_set[company]}","{$farm_set[addr][ori_text]}",600,400,16, map_id); 을 입력합니다.

 

네이버 지도

 

구글 지도

 

결과