케이보드 오션 프랜차이즈 스킨에서 구글 지도가 제대로 표시되지 않는 경우

2019. 4. 18. 01:00 | 댓글 2

워드프레스에서 프랜차이즈 지점 찾기 기능을 구현하고 싶은 경우 케이보드의 오션 프랜차이즈 스킨을 사용할 수 있습니다. 다른 방법으로 다음 글에서 소개하는 플러그인을 고려해볼 수도 있습니다.

오션 프랜차이즈 스킨을 이용하려면 케이보드 게시판 플러그인이 설치되어 있어야 합니다.

케이보드 프랜차이즈 스킨출처: https://www.cosmosfarm.com

주소를 누르면 지도가 표시됩니다.

케이보드 프렌차이즈 스킨출처: https://www.cosmosfarm.com

만약 구글 지도가 표시되지 않는다면 올바른 Google Maps API 키를 생성하여 설정해주어야 합니다.

https://console.developers.google.com/

1. 구글 로그인하시고 Google API 콘솔에서 프로젝트를 생성해주세요.

2. 필요한 API를 사용하게끔 설정해주세요.

Google Maps JavaScript API
Google Maps Geocoding API
기타 추가로 필요한 API는 사용하고 불필요한 API는 사용중지 해주세요.

3. Google API 콘솔 -> 사용자 인증 정보 -> 사용자 인증 정보 만들기 -> API 키를 만들어서 도메인을 추가해주세요.

HTTP 리퍼러(웹사이트)로 선택하고 실제 사용할 도메인을 등록해주셔야 합니다. (등록 후 일정 시간이 지나야 적용이 됩니다.)

 

오션 프랜차이즈 스킨의 document.php 파일에서

기존 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 코드 대신 아래 코드로 교체해주세요.

<script src="https://maps.googleapis.com/maps/api/js?key=API키입력" type="text/javascript"></script>
출처: https://www.cosmosfarm.com/threads/document/9684

Google Maps API 키를 생성하여 등록하는 방법은 다음 글을 참고해보세요.

올바른 방법으로 구글 지도 API 키를 생성하여 입력해도 문제가 발생하는 경우 오류 메시지를 확인해보시기 바랍니다. 아마다 API 키의 할당량이 초과되었을 수도 있습니다.

Geocoding Service: You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account  For more information on usage limits and the Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/usage

API 키를 생성할 때 신용카드 정보를 입력해야 구글 지도가 제대로 표시될 수 있습니다.

https://developers.google.com/maps/documentation/javascript/usage-and-billing 문서에서 Maps JavaScript API의 비용 정보를 확인할 수 있습니다.

구글 지도 API 가격

살펴보니 Dynamic Maps의 경우 지도 로드가 월 10만 건 이하이면 로드당 0.007달러이고, Dynamic Street View의 경우 (지도 로드가 월 10만 건 이하이면) 로드당 0.014달러입니다.

그러므로 상황에 따라 비용이 청구될 수도 있습니다. 지도 로드가 많아서 비용이 제법 청구된다면 지도를 이미지로 대체하는 것을 고려해볼 수도 있을 것 같습니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    IT세레스

    규모가 있는 사이트의 경우 조금 신경써줘야할 거 같아요.