웹지원 매뉴얼

[카페24 매뉴얼] C스토어의 구글맵 API Key(키) 발급받기 본문

MANUAL

[카페24 매뉴얼] C스토어의 구글맵 API Key(키) 발급받기

웹제작 전문 웹지원 2017.11.20 18:54



[카페24 매뉴얼]
C스토어의 구글맵 API Key 발급받기

카페24 관리자화면 C스토어의 구글맵 앱의 설치 후 API를 등록하는 과정의 매뉴얼입니다.
기존 카페24에서 제공하던 매뉴얼은 오래전에 제작된 탓에 해당 매뉴얼로는 진행이 어렵다는 문의를 자주 받은 이유로
매뉴얼을 따로 제작하게 되었습니다.

해당 매뉴얼은 여러 번 테스트를 거처 알아낸 방법으로 기존 카페24에서 제공하던 매뉴얼과는 많이 다를 수 있습니다.
또한 알려드리는 매뉴얼이 100% 정확한 방법이 아닐 수 있는 점 양해 바랍니다.






#01


카페24 관리자 페이지에서 C스토어의 구글맵 관리로 접속합니다.






01_1. 최상단 오른쪽 부분 c스토어 > 구글맵 설치 및 관리하기 접속


해당 페이지에서 [API Key 입력] 버튼을 클릭합니다.












01_2. 아래 이미지에 표시된 주소로 접속하여 구글 로그인을 진행합니다.












01_3. 구글 로그인 후 우측에 프로젝트 만들기를 클릭합니다.












01_4. 프로젝트 이름을 작성 후 만들기를 클릭합니다.












01_5. 프로젝트 생성이 완료되었다면 왼쪽에 라이브러리를 클릭합니다.


해당 페이지가 안 뜬다면 로고를 클릭하여 새로 고침해줍니다.












01_6. 검색창에 Google Maps Geocoding API 를 검색 후 해당 서비스를 사용설정 합니다.


Google Maps JavaScript API 도 검색 후 해당 서비스도 사용설정 합니다.












01_7. 두 서비스의 사용설정이 되었다면 맨 우측에 [사용자 인증 정보 만들기]를 클릭합니다.












01_8. 위에 [사용자 인증 정보 만들기] 또는 느낌표 아이콘이 있는 [API 키]를 클릭합니다.












01_9. 아래의 이미지와 같이 설정합니다.


HTTP 리퍼러 (웹사이트) 체크
구글맵을 사용하는 사이트의 주소(도메인)를 입력합니다.

예)
http://jiwongoon.com (유료 도메인의 PC버전)
http://m.jiwongoon.com (유료 도메인의 모바일버전)
http://ecudemo77940.cafe24.com (무료 도메인 PC버전)
http://m.ecudemo77940.cafe24.com (무료 도메인 모바일버전)


http://shop2.jiwongoon.com (번역몰 유료 도메인의 PC버전)

http://mobile--shop4.jiwongoon.com (번역몰 유료 도메인의 모바일버전)

http://shop2.ecudemo77940.cafe24.com (번역몰 무료 도메인 PC버전)

http://mobile--shop4.ecudemo77940.cafe24.com (번역몰 무료 도메인 모바일버전)


(shop2는 번역몰 고유 번호로 언어별로 여러개의 사이트가 있다면

shop2, shop3, shop4 와 같이 계속 주소를 추가하셔야 합니다.)




위의 주소를 전부 작성한 다음 저장을 클릭합니다.












01_10. 정상적인 입력이 완료되면 아래 이미지와 같이 느낌표 아이콘이 사라집니다.


해당 페이지 우측에 API Key를 복사합니다.












01_11. 우측에 있는 API Key를 복사하여 카페24 관리자로 다시 접속합니다.


우측 상단에 C스토어를 클릭하여 구글맵에 접속 후 복사한 API Key를 붙여넣기 하고 등록합니다.












API Key 등록이 완료되었다면 구글맵을 등록하시기 바랍니다.

지도 등록 페이지에서
"죄송합니다. 문제가 발생했습니다.
Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요."
라는 문구가 뜰 경우


1) 기존 API Key 값을 재발급 받아 진행합니다.
2) 구글 사용자 인증정보 HTTP 리퍼러에서 도메인 앞에 특수문자 등이 들어갔는지 확인합니다. (01_9 참조)
3) 1, 2번 확인 후에도 "죄송합니다. 문제가 발생했습니다." 문구가 뜬다면 약 하루간 그대로 방치합니다.

(적용되는데에 걸리는 시간은 구글측에서 약 5분이라고 알려줍니다. 

하지만 시간이 더 걸리는 것으로 확인되며 정확한 시간은 알 수 없습니다.)


여러번의 테스트 결과 API Key를 등록 후 바로 적용된 경우가 드물며,
다음날 확인하면 정상작동 중인 경우가 많았습니다. 


(추가안내)

또한 위에 안내드리는 서비스(01_6 참조)로

어떤사이트는 모바일버전에 정상적으로 지도가 출력되고

어떤사이트는 모바일버전에 지도가 출력되지 않습니다.


위 사항대로 진행을 다 해봐도 문제가 있다면 카페24에 따로 문의를 넣어주시기 바랍니다.

하지만 카페24측에 문의하면 1번과 같이 재발급을 하라고만 안내를 해주는 경우가 많아서

구글맵 적용을 하는데에 시간이 오래 걸릴 수 있습니다.

이점 참고하시어 구글맵을 사용하실 예정이라면 미루지 마시고 진행하시기 바랍니다.












매뉴얼이 이해가 어려우신 분들을 위해 C스토어의 구글맵 API Key(키) 발급받기 풀 영상을 올리니 참고 바랍니다.












※ 해당 매뉴얼 컨텐츠는 지원군디자인에서 제작된 작업물이므로 동의 없이 양도, 복사, 배포 등이 절대 불가능합니다.
저작권법 위반 시 손해배상 청구 또는 법적 책임을 받을 수 있습니다.







1 Comments
댓글쓰기 폼