[프렌차이즈 테마/매장찾기 플러그인] 구글지도/서버 API생성 하기

이 게시물은 마이홈피의 '매장찾기' 플러그인이 사용되는 경우에만 필요한 내용입니다.
매장찾기 플러그인이 없으신 분들은 해당이 없으니 참고부탁드립니다.

해당 플러그인을 제대로 사용하기 위해서는 구글 API키와 구글 서버API키 2가지가 필요합니다.

[구글 API키 생성하기]

구글계정이 없는 경우 만들어야 합니다.
구글 계정이 있는 상태에서

https://console.cloud.google.com/

에 접속을 합니다.

접속시 아래의 화면이 나온다면 약관 동의를 하고 '동의 및 계속하기'를 눌러주세요.

상기화면이 안나온다면 아래의 진행을 이어서 하여주세요.

왼쪽 상단의 [프로젝트 선택]을 눌러줍니다.

이와같은 팝업창이 뜨면 우측상단에 있는  '새 프로젝트'를 클릭합니다.

프로젝트를 생성합니다. 프로젝트 이름은 영문으로 원하시는 명칭을 넣어주시면 됩니다.

새프로젝트 생성된 화면이 나오거나 또는 

알림창을 뜨게 되는데 [프로젝트를 선택]을 클릭합니다.

프로젝트 선택을 하게 되면 해당 프로젝트의 세부설정을 할 수 있는 화면으로 이동이 됩니다.

(아래 화면 예)

화면중앙 박스(API박스) 하단에 있는  을 선택합니다.

화면에서 '사용자 인증정보'를 선택합니다.

화면에서 상단에 있는

선택을 합니다.

에서 'API키'를 선택하면 잠시 후 키가 생성이 됩니다.

생성이 완료되면 키를 카피합니다.

복제된 키는 마이홈피쪽에서 요청을 드린상태라면 이 API키 값을 보내주시면 되십니다.
직접 하시는 경우 아래의 과정을 이어서 하여주세요.

이제 작업하시는 홈페이지의 관리자 페이지로 들어가셔서

관리자 > 매장찾기 > ASL 설정 으로 들어갑니다.

부분에 카피한 키를 삽입하고 저장을 합니다.

그리고 다시 방금의 구글화면으로 와서 사용할 실제 API를 활성화 하기위해 

메뉴에서 라이브러리를 선택하시고

상단의 검색창에 Directions API 를 검색하여 주세요.

동일한 명칭의 항목이 나오면 클릭하여 주시고 [사용]을 눌러줍니다.

사용 후 만일 아래의 화면이 나온다면 입력진행 하여주셔야 합니다.

구글에 결제설정을 등록하신 적이 있다면 아래의 과정은 스킵을 하여주세요.

체크 후 계속을 눌러줍니다.

상기내용을 모두 입력후 다음단계로 넘어갑니다.

해당 과정 진행 후

상기 과정도 진행을 하여주세요.
결제카드 설정은 필수입니다.
지도 API키의 패킷량이 높다면, 즉 접속자가 많다면 이용량에 따라 비용이 결제될 수 있습니다.
하지만 일반적인 사이트의 접속량 하루 1~200명정도의 수준으로는 보통 비용이 발생될 확률의 낮습니다.

특정 상황(미디어 광고 또는 악의적 새로고침 등)외 보통은 비용이 발생되지 않는 경우가 대부분으로 보시면 됩니다.

해당 과정 완료 후

상기 화면까지 제출하면 결제정보 입력이 완료 됩니다.

혹시라도

이러한 화면이 나오게 된다면 [나중에] 선택하시면 됩니다. 
해당 사항은 별도로 설정이 가능합니다.

상기과정 완료 후 다시 

검색창에서 Geocoding API 를 검색 후

선택하시고 [사용]을 눌러줍니다.

검색창에서 Maps JavaScript API 검색 후

선택하시고 [사용]을 눌러줍니다.

검색창에서 Places API 검색 후

선택하시고 [사용]을 눌러줍니다.

상기대로 진행하셨다면 아래 4가지 항목이 전부 사용상태가 된것입니다.
혹시라도 중간에 [사용]이 된것인지 아닌지 헷갈린다면 다시 검색해서 항목 선택 후 사용상태를 체크하여 주시면 되십니다.

> Directions API
> Geocoding API
> Maps JavaScript API
> Places API

여기까지 과정이 완료되었다면 다 된것입니다.

하지만 추가로 내 API를 통해 다른사람이 자원을 사용하지 못하도록 설정하는것도 필요합니다.

상기단계까지 진행한 상황의 화면에서 아래의 진행을 하여주세요.

왼쪽 상단의 구글클라우드 로고를 클릭합니다.

이러한 화면이 나올 것 입니다.

(방금 생성한 프로젝트)

방금 생성하신 프로젝트를 클릭합니다.

화면에서 보이는

하단의 > API 개요로 이동을  선택합니다.

API 및 서비스를 선택합니다.

사용자 인증정보로 들어가서

내가만든 API키를 선택하고 

이 화면이 나오면 애플리케이션 제한사항에서 '웹사이트'를 선택 하여주세요.

선택하시면 아래 항목이 나옵니다.

여기서 '추가하다(+ADD)'를 선택해서

내 홈페이지 주소를 입력하고 '완료'를 누릅니다.

내 홈피 주소가 https://naver.com 이라면 이 주소와 함께 https://naver.com/* 이렇게도 한번 더 추가입력을 합니다.

그리고 하단에 [저장]을 꼭 눌러주어야 합니다.

여기까지 하시면 구글 API키 만들기와 제한을 완료한 것입니다.

만일 현재 카페24의 작업계정주소로 되어있다면 카페24 주소를 입력하시면 되시고 나중에 도메인이 연결된다면 도메인 주소도 추가로 넣어주시면 되십니다.

API키 생성과정이 완료되었습니다.

상기과정의 상태로 완료되었다면 아래의 과정을 바로 이어서 하여주세요~

[ Google 서버 API 키 ] 만들기: 매장찾기 플러그인을 사용하기 위해서 이 과정도 진행해야 합니다.

사용자 인증정보로 들어가셔서

사용자 인증정보 만들기 > API 키 를 선택해서 키를 생성합니다.

생성된 키를 다시 홈페이지의 관리자 페이지에 가서

관리자 > 매장찾기 > ASL 설정으로 들어갑니다.

이 부분에 방금 생성한 키를 넣어주고 하단에 있는 저장을 합니다.

그런 후 다시 구글 화면으로 돌아와서 키생성 마친뒤에 나오는

화면에서 방금생성한 키를 선택합니다.(API 키 2개 부분을 선택)

제한 사항부분에 IP주소를 선택합니다.

추가하다를 선택하고 내 호스팅서버의 아이피를 입력 해 주어야 합니다.

내 PC의 검색창 또는 윈도우 단축키 > 찾기 를 선택해서 'CMD'를 입력합니다.

이렇게 입력하면

명령 프롬프트가 나옵니다.

여기에 

ping 홈페이지주소 를 입력하고 엔터를 칩니다 (예: ping naver.com)

이런식으로 호스팅의 아이피가 확인되면 아이피를 카피해서 구글화면의 아이피 자리에 입력을 합니다.

그리고 하단에 있는 [저장]을 꼭 눌러주세요.

이렇게 모든 과정이 완료되었습니다.

감사합니다.