처리중 처리중

서비스 매뉴얼

닷홈 서비스의 이용방법을 자세히 안내해드립니다.

매뉴얼 구 닷홈빌더 오시는 길(구글 지도)​​ 모듈 적용방법
오시는 길(구글 지도)​​ 모듈 적용방법


※닷홈 빌더의 오시는 길이란?

닷홈 빌더 상품에서 지도 API를 연동하여 해당 지도 상의 위치정보를 불러와 보여줄 수 있는 기능입니다.

기업 및 장소 등을 홍보 하실 때 해당 위치를 효율적으로 전달할 수 있습니다. 

​다수의 지도 API가 존재하며, 현재 메뉴얼에서는 구글 지도 적용법을 설명 드리도록 하겠습니다. ​

 

구글 클라우드 콘솔 사이트(cloud.google.com)로 접속합니다.

▲ 위 링크를 클릭하여 접속 하실 수 있습니다.

 

API를 사용하기 위해 먼저 프로젝트를 만들어야 합니다.

 

 

 


페이지 우측 상단의 콘솔 을 클릭합니다. 




좌측 상단의 프로젝트 선택​ 을 클릭 하여 프로젝트 설정 화면에 진입합니다.

 

 

 


​우측 상단의 새 프로젝트 를 선택합니다.

 

 

 

  

프로젝트 이름을 입력한 뒤 만들기 를 클릭합니다. 프로젝트가 만들어지기 까지 약간의 시간이 소요 됩니다.

프로젝트가 만들어 지기 전에 페이지를 이탈 하실 경우 프로젝트가 정상적으로 생성되지 않습니다. 

프로젝트 생성 여부는 우측 상단의 종모양의 아이콘을 클릭하여 확인 하실 수 있습니다. 

 

프로젝트 이름은 이후에 수정이 가능하며, 아무렇게나 설정 하셔도 무방합니다.



 

 

좌측 상단 을 클릭하여 탐색 메뉴를 펼칩니다.

 

 

 


펼쳐진 메뉴의 API 및 서비스 -> 라이브러리 를 클릭합니다.

 

 

 


닷홈 빌더에서 사용할 모듈은 Maps JavaScript API 입니다.

API 라이브러리 페이지에서​ Maps JavaScript API 를 클릭합니다.

 

 

 


사용 설정 을 클릭합니다.

 

 

 

 

이후 특정 주소에서만 해당 API를 불러올 수 있도록 설정을 해야 합니다.

특정 주소에서만 불러올 수 있도록 설정 하지 않을 경우, 해당 키값만 있다면 어디서든 나의 API를 불러올 수 있게 됩니다구글 API는 월별로 불러올 수 있는 횟수가 정해져 있기 때문에 아무 사이트에서나 무분별하게 불러올 경우, 사용이 불가능 할 수 있습니다. 

 

좌측 상단 Google Cloud Platform 을 클릭하여 메인으로 이동합니다.

 

 

 


좌측 상단 을 클릭하여 탐색 메뉴를 펼칩니다.



 

API 및 서비스 -> 사용자 인증 정보 를 클릭합니다.

 

 

 

 


사용자 인증 정보 만들기 -> API 키 를 클릭합니다.

 

 

 

 

API 키 생성 완료 후 우측 하단 키 제한 을 클릭합니다.

 

 

 

 

애플리케이션 제한사항 -> HTTP 리퍼러(웹사이트) 를 클릭합니다.


이러한 HTTP 리퍼러의 요청 허용(웹사이트)(파란 네모)

구글 지도를 불러올 닷홈 빌더 주소를 입력 합니다.

 

- 예) "http:// 닷홈빌더 주소", "https:// 닷홈빌더 주소​"

https:// 주소를 추가하지 않으실 경우, SSL 보안 인증서를 설치하여 https:// 주소로 접속 시

지도 API를 불러올 수 없는 점 유의해 주시기 바랍니다. 입력 후 저장 을 클릭합니다.

 

 

 

위 버튼을 눌러 키값을 클립보드에 복사 합니다.

 

 

 

 

이후 닷홈 빌더 관리자 페이지의 ​모듈 -> 오시는 길 페이지의

Google API Key 란에 복사한 키값을 붙여넣기 합니다. 키값을 붙여넣기 한 후 페이지 최하단의 저장하기 를 클릭하여 저장합니다.

 

닷홈 빌더에 지도 API를 등록 하신 이후, 오시는 길에 표기될 주소를 지정해 주셔야 합니다.

위도경도를 통해 해당 주소의 위치 를 불러 올 수 있으며 방법은 다음과 같습니다.

 

구글 지도(maps.google.com)에 접속 한 뒤,

오시는 길 에 표시할 주소를 검색합니다.

▲ 위 링크를 클릭하여 접속 하실 수 있습니다.

 

 

 


검색해서 나온 결과 위에 커서를 두고

마우스 우클릭 -> 이곳이 궁금한가요? 를 클릭합니다.

 

 

 


주소 하단의 숫자 를 클릭합니다.
※해당 숫자가 검색하신 주소의 위도 및 경도입니다.


 

 

해당 주소 좌표 하단의 숫자를 복사합니다.

 

 

 

 

닷홈 빌더 관리자 페이지의 모듈 -> 오시는 길 페이지의 MAP(위도, 경도) 항목에 복사한 위도 및 경도 값을 붙여넣기 합니다. ​닷홈빌더 관리자 페이지 내에서 설정을 하신 후 맨 아래 저장하기 를 눌러주셔야 변경된 사항이 적용됩니다. 

 

 

 

 

오시는길 페이지에 삽입한 지도가 정상적으로 동작하는지 확인합니다.





※ 주의사항
구글 지도 API의 경우, 결제 수단을 등록 하지 않으면 지도가 출력 되기는 하지만 워터마크 처리되어 출력이 이루어집니다. 위와 같은 For development purposes only 워터마크를 원하지 않는 경우 결제 수단을 등록해주세요.