Google Maps Platform의 API Key 발급 및 InvalidKeyMapError 에러 - 결재 수단을 연결해 줘야 합니다.

 예전 구글맵을 사용할 때는 Google Map Key만 받으면 사용할 수 있었습니다.

요즘은 Google Cloud Platform 서비스에서 Key를 받고, 

Google Maps Platform 서비스를 통해서 Map 서비스를 사용할 수 있습니다.

Google Cloud Platform의 서비스 중에 웹용 구글맵(Maps JavaScript API) 사용이 많은 편입니다.

추가로, Google 서비스를 받으려는 계정에 결재수단(신용카드/은행계좌)을 추가해야 합니다.

결재수단 추가 유도를 위해서 $300/12 month의 크레디트를 줘서, 무료 체험을 할 수 있게 있답니다.

13개월이 지나면, 카드/은행계좌를 등록해서 지불하는 방식으로 처리됩니다.

요즘은 Account를 만들 때마다 결제 수단을 연결 항목이 필수로 바뀌어 가고 있네요. -.-;;

 

 

 

키 발급 :

1. Google Cloud Platform Console로 이동합니다.

2. Project 메뉴에서 선택 또는 생성(create)해줍니다.

3. 탐색 메뉴 [=](햄버거버튼)에서 APIs & credentials > API key선택

4. API key created창에서 키를 발급받습니다.

여기서, 사용하실 서비스 예, Maps JavaScript API 등을 선택

 

키 제한 사항 > 애플리케이션 제한사항
- HTTP리퍼러(웹사이트)의 제한을 보안적인 요소는 선택해주시면, 다른 곳(Site)에서 사용하는 것을 차단할 수 있습니다.
(예: "https://blog.edit.kr/*"와 같이 아래의 하위 URL에서 사용하게 추가)

 

Google Cloud Platform 프로젝트 키 화면

 

키 발급 받기 사이트:
https://developers.google.com/maps/documentation/javascript/get-api-key

Get an API Key  |  Maps JavaScript API  |  Google Developers

 

키를 발급 Error들은 Chrome의 Console모드 창에서 확인 가능합니다.

해당 콘솔에 에러에 대한 설명의 링크가 나와서, 클릭으로 쉽게 어떤 에러인지를 알 수 있게 되어있습니다.

에러 메시지	에러 내용
ApiNotActivatiedMapError	Maps JavaScript API가 액티베이션 되지 않았을때 나는 에러 메시지
InvalidKeyMapError	API key에 결재(Billing)이 추가되지 않을때 나타나는 에러입니다. https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

해결 방법은, 신용카드 정보를 넣어주면 간단하게 해결된다.

해당 결재 항목을 추가하기 전까지는 개발 전용이라는 워터 마크가 찍혀서 지도를 보기 힘들게 만듭니다.

 

Maps JavaScript API가 활성화 되지 않았을때 나는 에러(ApiNotActivatedMapError)

해당 계정에 결재(신용카드/은행)항목이 등록이 안되있을때 나는 에러

여러가지 서비스들 Maps JavaScript API는 웹에서 구글맵을 사용하는데 사용 되는 라이브러리 서비스입니다.

기본적으로 "Maps JavaScript API"와 "Maps Embed API"서비스는 추가가 되어 있지 않아서, 해당 서비스를 "API 라이브러리"에서 별도로 추가해 줘야 "API 키" 설정에서 서비스를 추가가 가능하다.

API 라이브러리 추가

API키 제한에서 사용할 서비스 선택합니다. 

예전과 달라진 구글 Map 서비스를 사용하면서, 역시 비용(돈)을 지불하면 서비스가 좋아지는 것을 느껴지네요. API 사용량과 반응속도 에러율 등의 모니터링까지 지원함으로써 상용 서비스의 부분을 다 보강된 느낌이 듭니다.

(아래의 깃발넣기: https://developers.google.com/maps/documentation/javascript/examples/icon-complex )

Maps JavaScript API사용한 Mobile jQuery화면

 

 

 

Map Embed API 사용하기

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Map Embed API 가이드

https://developers.google.com/maps/documentation/embed/guide

(* 지원을 중단: 로그인된 사용자 관련 Map Embed API)

 

Map Type(뷰 모드): 스카이뷰 모드

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

디렉션 모드

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways