Google Maps for Business Client ID 적용하기

Google Maps for Business 사용자가 Client ID를 코드에 적요하는 방법을 알아 보겠습니다.

처음 비지니스 고객이 받게 된 문서는  Welcome Letter입니다. 주요 정보는 gme-와 같이 시작하는 Client ID입니다.

maps-api-premier

 

Google Maps API for Business License  고객에게 키 정보, 기술지원 방법, Trouble Shooting등에 대한 내용을 담고 있습니다.

이번에 설명드릴  Client ID와 절대 외부에 공개되어서는 안 되는 Cryptographic key, 즉 암호키가 들어 있습니다. 그리고 사전에 등록한 Google Maps API for Business License를 사용할 도메인 주소도 적혀서 옵니다.

처음 등록한 도메인명이 바뀌었을 경우에는 Support Portal에서 “Add URLs” 메뉴를 통해서 추가 등록을 하실 수 있으니, 꼭 Support Portal에 들어가는 계정등록을 마쳐 주시기 바랍니다.

Client ID를 정해진 도메인이 아닌 도메인에서 사용할 경우 에러 메시지와 함께 Google Maps API를 사용할 수 없습니다. Client ID를 어플리케이션에서 사용하기 전에 사용하고 있는 도메인을 client ID를 사용할 수 있게 등록해야 합니다.

 Google Maps Javascript API V3를 로딩할 때 등록된 도메인의 서버 안에 있는 웹 페이지 스크립트에서
<script src="http://maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false"
type="text/javascript"></script>

위와 같이 로딩하면 Google Maps API for Business를 사용할 수 있습니다.

client= 뒤에 있는 gme-yourclientid 부분에 Client ID를 입력하고, sensor= 뒤에는 웹사이트를 방문하는 사용자의 위치와 기기 등의 정보를 파악하고 싶다면 true로 설정하면 됩니다. 이 기능을 원하지 않더라도 반드시 true나 false 둘 중 하나로 설정해 놓아야 합니다.

아래의 코드는 https://로 시작하는 도메인에서 Google Maps API V3를 로딩할 경우 사용해야 할 URL입니다.

<script src="https://maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false"
type="text/javascript"></script>

Map JavaScript API V2를 로딩할 때에도 마찬가지입니다. 원래 V2에서는 Google API Console을 사용하여 받은 키를 사용하지만, Business 고객의 경우에는 그 Key 대신에 client ID를 아래와 같이 입력하면 됩니다.

<script src="http://maps.google.com/maps?file=api&v=2&client=gme-yourclientid&sensor=true_or_false"
type="text/javascript"></script>

최근 구글에서 발표한 내용에 따르면, V2를 로딩할 때 valid하지 않은 key을 입력할 시에는 로딩에 문제가 생길 수 있다고 합니다. 특히 Business 고객의 경우 client ID 대신에 Welcome letter에 있는 비밀키를 입력하는 경우가 많이 있습니다. 이는 비밀키를 외부에 누출할 뿐만 아니라, 정작 그 로딩하는 페이지는 Business 고객으로 인정 받을 수 없습니다. 

따라서 Business 고객의 경우에는 반드시 client ID를 입력하고, Key를 따로 입력해서는 안 됩니다.

아래의 코드는 https://로 시작하는 도메인에서 Google Maps API V2를 로딩할 경우 사용해야 할 URL입니다.

<script src="https://maps.google.com/maps?file=api&v=2&client=gme-yourclientid&sensor=true_or_false"
type="text/javascript"></script>

다음은 Google Common AJAX Loader를 통해서 API를 로딩하는 방법입니다. 이 방법을 이용하면 언제든지 자바스크립트 코드인 google.load()를 이용하여 페이지와 비동기적으로 지도를 로딩할 수 있기 때문에, 페이지가 처음 실행될 때가 아닌, 원하는 시점에 지도를 로딩할 수 있습니다. 따라서 쓸데 없이 생성되는 Pageview를 절약할 수 있습니다.

첫번째로 페이지의 <head>에 위와 같은 코드를 삽입합니다.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

그리고 client ID와 sensor 파라미터와 함께 원하는 시점에 아래와 같은 코드로 Google Maps API V3를 로딩합니다. 밑에 숫자 3은 V3를 의미합니다.

google.load("maps","3", {"other_params":"client=gme-yourclientid&sensor=true_or_false"});

아래의 코드는 https://로 시작하는 도메인에서 로딩할 경우 사용해야 할 URL입니다.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Google Maps API for Business는 Google Earth API도 포함하고 있습니다. Client ID를 적용하여 Google Earth API를 로딩하는 방법은 Google Common AJAX Loader를 통해 Google Maps API를 로딩하는 방법과 같습니다.

<script src="http://www.google.com/jsapi"></script>

아래와 같이 maps 대신 earth를 버젼은 1을 입력해 주면 됩니다.

google.load("earth","1", {"other_params":"client=gme-yourclientid&sensor=true_or_false"});

Google Earth API의 경우에도 https 도메인에서의 요청시 별도의 도메인으로 요청해 주어야 합니다.

<script src="https://www.google.com/jsapi"></script>