Google Maps Platform – 18.12.14

Google Maps API 관리

Google Enterprise Support Portal과 Google API Console

Google Enterprise Support Portal과 Google API Console

Google Maps API는 2개의 사이트(Google Enterprise Support Portal, Google API Console)에서 관리 가능합니다.

2개의 사이트는 서로 독립적인 사이트로 계정이 연동되지 않습니다. (별도의 계정 사용 필요)

Google Enterprise Support Portal에서는 Javascript API 관리, URL 인증, 사용량 확인, Google Maps API에 관련 문의 접수를 할 수 있습니다.

Google API Console에서는 Javascript 이외의 API를 생성 및 삭제 관리가 가능합니다. 라이센스 구매하시고 받으신 웰컴레터에 있는 프로젝트 링크를 클릭하면 구매하신 라이센스가 적용된 프로젝트로 바로 이동합니다.

Google API Console에 초기 생성된 프로젝트 하위에 생성하는 API는 구매한 라이센스가 종속되어서 적용됩니다.( Asset Tracking 라이센스는 Web Service Place API 제외 ).

만약 새로운 프로젝트를 만들어서 사용한다면 해당 프로젝트 하위에 생성한 API는 구매한 라이센스 적용이 되지 않으니 유의하시기 바랍니다.

Google Enterprise Support Portal

Google Enterprise Support Portal 등록 및 사용
Client ID 적용
라이센스 적용 도메인 추가/변경
페이지별 사용량 측정
Credit 정의
Google Maps Javascript API 버전
Google Maps Javascript API Browser Support
Google Maps Javascript API 언어 및 지역 파라미터

Google Enterprise Support Portal 등록 및 사용

Google Maps for Work와 관련한 기술 사항 및 운영 사항을 문의하고 답변받을 수 있는 Google Enterprise Support Portal을 사용하기 위해서는 Support Portal에 사용자 등록을 해야 합니다.

하단 URL에서 계정 신청하실 수 있습니다.
https://google.secure.force.com/RequestAccess

FAQ 모음 https://support.google.com/work/answer/142246?hl=ko#request

상위 정보를 입력하여 요청하면 수일 내에 Google에서 정확한 고객 정보 확인한 후에 로그인 정보가 담긴 Support Portal 환영 메일을 발송합니다.

상위 정보 중에 email 정보는 Gmail 계정 이외에도 사용 가능합니다. Google API Console은 Gmail 만 사용 가능합니다. 참고 부탁드립니다.

계정 등록 이후에 Support Portal에 로그인하면 상위와 같은 메인 화면이 나타납니다. Support Portal을 통해서 Google Maps API에 관련 문의 접수(Cases), Javascript API 사용 가능한 URL 인증(Maps: Manage Client ID), API 사용량 조회(Maps: Usage Report), Google 관련 소식 및 공지(NEWS AND ANNOUNCEMENTS) 기능을 사용할 수 있습니다.

첫 번째로 Cases 메뉴에서는 Google Enterprise Support Team과 커뮤니케이션을 할 수 있습니다. Google Maps와 관련해서 질문 사항이나 요청 사항 등 무엇이든지 이슈가 생기면 Create New Case 버튼을 눌러서 요청 사항을 양식에 맞게 영어로 작성하면 1~2일 안에 답변을 받을 수 있습니다.

예를 들면, 사용하고 싶은 기능에 대한 샘플 소스를 받아볼 수 있고, 생각하는 기능을 지원하는지 여부를 물어볼 수도 있습니다. Google Maps API를 이용한 개발 중에 어떤 문의사항도 Support Portal은 답변해 주고 있습니다.

두 번째로 News 메뉴에서는 Google Support Portal에서 공지 및 새로운 이슈 등에 대한 정보를 확인할 수 있습니다. 업데이트 소식 또는 변경 내용에 대해서 미리 확인 가능하도록 지원해주고 있으며 해당 내용으로 시스템 변경에 대한 계획 및 수행에 좀 더 용이하게 이용할 수 있습니다.

세 번째로 Google Maps Javascript API를 사용하다가 시스템의 도메인, IP에 대한 변경이 발생할 경우 라이센스 키에 대한 인증 작업을 할 수 있는 Maps: Manage Client ID 메뉴입니다.

사용 중인 Client ID를 선택하고 추가, 삭제하고 싶은 도메인, IP 등을 입력하고 Add, Delete 버튼을 눌러서 인증 도메인, IP등을 관리 할 수 있습니다. 현재 페이지에서 URL Signing에 필요한 Crypto Key 확인도 가능합니다.

마지막으로 구매한 라이센스의 Credit 사용량을 확인할 수 있는 Maps: Usage Report 메뉴입니다. 해당 메뉴를 클릭하면 Maps APIs Credit Reports와 Page View Reports를 선택할 수 있는데 Page view는 현재 Credit으로 변경되어 Maps APIs Credit Reports 버튼을 클릭하시면 됩니다.

시작일 종료일을 검색 값으로 사용한 Credit를 일별 그래프와 일별 API별 사용량을 확인할 수 있습니다. Javascript Base Map API에 channel을 파라미터로 사용한 경우 페이지 혹인 시스템별로 사용한 channel 별로 사용량 조회가 가능합니다.

각 API 별 호출에 대한 상세정보(성공, 실패)를 알고 싶은 경우 해당 API를 클릭하면 상세 페이지에서 조회 가능합니다. CSV 버튼을 클릭하면 해당 정보를 CSV 파일로 다운로드 가능합니다.

Client Id 적용

구매하시고 받으신 웰컴레터에는 Google Maps Javascript API를 사용할 수 있는 Client Id가 있습니다.

Client ID는 gme-와 같이 시작하는 코드 입니다.

이번에 설명드릴 Client ID와 절대 외부에 공개되어서는 안 되는 Cryptographic key, 즉 암호키가 들어 있습니다.

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

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

Google Maps Javascript API V3를 로딩할 때 등록된 도메인의 서버 안에 있는 웹 페이지 스크립트에서

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

client= 뒤에 있는 gme-yourclientid 부분에 Client ID를 입력하고, async 특성을 사용하면 Maps API가 로드되는 동안 브라우저가 나머지 웹사이트를 렌더링할 수 있습니다. API가 준비되면 callback 매개변수를 사용하여 지정된 함수를 호출합니다.

Google Maps for Work 고객의 경우 client ID 대신에 Welcome letter에 있는 비밀키를 입력하는 경우가 많이 있습니다. 이는 비밀키를 외부에 누출할 뿐만 아니라, 정작 그 로딩하는 페이지는 Google Maps for Work 고객으로 인정 받을 수 없습니다.

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

URL Signing (Digital Signatures)

URL Signing

일부 API에 대한 요청에는 암호화 알고리즘을 사용하여 URL 과 암호키를 결합해 고유한 서명 (Signature) 을 파라미터로 필요로 합니다.
이를 통해 생성된 파라미터를 디지털 서명(Digital Signature)이라고 하며, 이 과정을 URL Signing 이라고 합니다.
프리미엄 플랜 고객의 경우 Cryptographic Key (이하 crypto key) 값을 암호키로 사용합니다.
Post pay 고객은 URL 서명 비 번호 (URL Signing secret) 을 암호키로 사용합니다.
프리미엄 플랜 고객의 경우 Cryptographic Key 를 변경할수 없지만, Post pay 고객의 URL 서명 비밀번호는 변경할 수 있습니다. (Console 에서 변경 가능)
웹 서비스 API의 경우, 요청한 서버의 IP에 따라 제한될 수 있으므로, URL Signing이 필요치 않습니다. (HTTP Referer 제한 설정)하지만 정적 참조 이미지를 사용하는 Static Map API와 Street View API의 경우 HTTP Referer를 사용할 수 없는 경우가 있기 때문에 Digital Signature 를 추가하여 추가적으로 Key를 보호해야 합니다.

URL Signing 을 진행할 때, URL 의 전체 주소 ( HTTP Protocol 부터 전체 파라미터를 모두 포함한 Full Address ) 를 URL로 사용하여야 합니다. 비표준 문자는 UTF-8 인코딩이 필요합니다.

구글 내부 정책상, Signature 파라미터가 필요한 API는 다음과 같습니다.

사용 방법

사용 방법

Google Cloud Platform Console 에 접속합니다.
대시보드 하단의 사용 설정된 API 중 Signature 를 생성할 API 를 선택합니다.
상단에 [URL 서명 비밀번호 ( URL signing secret )] 탭을 선택하면 URL Signing비밀번호를 발급받을 수 있습니다.
발급된 비밀번호를 사용하여 API 를 호출하는 URL과 함께 URL Signing 을 진행하여API를 호출합니다.
● URL Signing Sample Code

https://developers.google.com/maps/documentation/maps-static/get-api-key#dig-sig-key
주의사항

a. [URL 서명 비밀번호] 탭에서 [서명되지 않은 사용 허용] 을 선택하면 Signature없이 호출이 가능합니다.

b.무단 사용을 방지하기 위해 Signature 가 없을 경우 API 별 하루 25,000개 까지의 호출만 가능합니다.

※ 참고 URL

● API키용디지털서명생성

https://developers.google.com/maps/documentation/maps-static/get-api-key?hl=ko#dig-sig-key

Digital signature 생성 방법

API Key 를 사용하는 고객과 Client ID 를 사용하는 고객의 차이점은, URL 서명 비밀번호를 할당받는 부분만 다를뿐, 나머지 단계는 동일합니다.

Client ID를 사용하는 고객의 경우 라이센스를 발급받을 당시 구글로부터 수신받은 웰컴레터 ( Welcome Letter ) 를 확인하시면, crypto key 를 확인하실 수 있습니다.

● Client ID 사용시, Crypto Key 확인 방법 ( Welcome Letter )

그 다음, HMAC-SHA1 알고리즘을 이용하여 URL 과 URL 서명 비밀번호 또는 Crypto Key 를 결합해 Digital Signature 를 생성합니다.

구글에서는 해당 알고리즘을 파이썬, 자바 등의 언어로 제공하고 있습니다.

※ 참조 URL

https://developers.google.com/maps/documentation/maps-static/get-api-key#sample-code-for-url-signing

라이센스 적용 도메인 추가/변경

Google Maps for Work는 등록하신 도메인에서만 API를 요청하여 사용할 수 있습니다. 이 도메인을 추가, 변경하는 방법을 알려드립니다.

아래는 도메인 주소를 등록했을 때, 그 도메인 주소와 함께 사용되는 모든 도메인의 조건입니다.
위의 Note that: 이하의 내용을 한글로 다시 정리해 보았습니다.

등록된 도메인의 sub-domain에서도 사용 가능합니다. 예를 들어, http://site.com을 등록했다면 http://subdomain1.site.com이나 http://subdomain2.site.com에서도 사용 가능합니다.

만약 사이트 등록 시 포트 번호를 지정하지 않았다면, 어떤 포트 번호든지 사용할 수 있습니다.
예를 들면, http://site.com을 등록했다면, http://site.com:80, http://site.com:5521 등에서도 모두 사용 가능합니다.

만약 https://로 시작하는 도메인이라면 반드시 https://로 시작하는 도메인을 등록하여야 합니다.
다시 말하면, http://site.com을 등록했다고 해서 https://site.com에서 사용할 수 있는 것이 아닙니다.

하지만 개발을 하다 보면, 추가로 다른 도메인을 사용하거나, 도메인이 바뀌는 경우가 생깁니다. 이런 경우에는 Google Enterprise Support Portal을 통해 추가를 해주어야 합니다.

Google Enterprise Support Portal에 들어가서 로그인을 하고 왼쪽 Maps: Manage Client ID 메뉴로 들어갑니다.
(Support Portal에 등록되어 있지 않은 경우는 여기를 클릭해서 Support Portal에 먼저 등록하세요.)

Enter the URLs 하단 입력창에 추가 또는 삭제 작업을 진행할 URL을 입력하고 하단 ADD URLs나 Delete URLs 버튼을 클릭합니다. 여러 개의 URL을 입력하실 경우 URL을 입력하시고 엔터키 입력 후 입력해주시면 됩니다.

기타 도메인과 관련된 정보는 아래 Google Maps for Work 사이트에서 찾아보실 수 있습니다.
https://developers.google.com/maps/documentation/javascript/get-api-key

페이지별 사용량 측정

Google Maps API를 적용한 웹 페이지의 페이지별 Pageview를 산정하기 위한 Channel ID 적용 방법을 알려드립니다.

Google Maps Javascript API는 더 나은 기능과 보안을 웹 표준을 준수하기 위해서 지속적인 업데이트 중이며 현재 지원중인 브라우저 정보는 하단 링크를 통해서 확인 할 수 있습니다.

https://developers.google.com/maps/documentation/javascript/3.exp/reference

Google Enterprise Support Portal을 통해 월별 혹은 일별 총 Pageview는 확인할 수 있지만, 각 페이지마다의 pageview를 확인할 때는 따로 Channel ID를 지정해주어야 합니다.

Pageview를 따로 알고 싶은 페이지에서 Google Maps API를 loading할 때 channel Parameter를 사용하면 Google Enterprise Support Portal에서 그 Map의 page view만 따로 볼 수 있습니다.

Support Portal에서 그 결과를 확인한 화면입니다. 페이지뷰는 실시간 산정되는 것이 아니라, 24~48시간 후에 결과를 볼 수 있습니다. 즉 아래 이미지는 2013년 8월 페이지뷰를 보여주고 있음으로, 2013년 8월 18일 정도에 본 화면이라고 할 수 있습니다.

tech-google_api_5_usage report

위 Channel parameter를 설정해줌으로써, 페이지뷰가 집중되는 지도 어플리케이션을 파악하고, 대책을 수립할 수 있습니다.

Channel ID에 대한 자세한 내용은 Google Maps 사이트에서 보실 수 있습니다.

https://developers.google.com/maps/premium/reports/usage-reports#channels

Credit 정의

Google Maps for Work의 요금 책정 기준이 되는 Credit의 정의에 대해서 상세하게 설명하여 드립니다.

구매하신 라이센스는 연간 사용량을 기준으로 Maps API credit이라는 할당량을 구매하신 겁니다. Maps API에 대한 모든 요청은 구매한 credit에서 차감되어 사용합니다. 예를 들어, Google Maps Javascript API를 사용하여 지도를 표시하면 Maps Javascript API map loads에 대한 credit을 사용합니다.
각 API 별 credit 차감은 하단을 참고하시면 됩니다.

그리고 사용량에 대한 가상 계산도 가능하며 하단 링크를 통해서 확인할 수 있습니다.

https://credits-calculator.appspot.com

Google Maps Javascript API 버전

Google Maps Javascript API는 3개의 버전을 가지고 있습니다.

첫 번째 Experimental Version 입니다. 해당 버전은 정식 버전은 아니고 차후 정식 버전을 위한 실험용 버전입니다.

두 번째 Release Version 입니다. 해당 버전의 API는 기능이 안정된 버전의 API입니다.

세 번째 Frozen Version 입니다. 해당 버전의 API는 Google Maps API에서 지원하는 가장 하위 버전의 API입니다.

Google Maps API는 상위 세 가지의 버전으로 지원되고 있으며 각각의 버전이 지속적으로 업데이트되고 있습니다.
예: 현재의 Frozen Version(가장 하위버전)은 3.25 버전이나 특정 업데이트 시기가 되면 3.26 이상 버전이 지원하는 가장 하위 버전입니다. Frozen Version 또한 지속적으로 업데이트가 진행됩니다.

최신 Google Maps Javascript API Reference는 https://developers.google.com/maps/documentation/javascript/3.exp/reference 에서 확인 가능합니다.

Google Maps Javascript API Browser Support

Google Maps Javascript api Browser Support

Google Maps Javascript API는 더 나은 기능과 보안을 웹 표준을 준수하기 위해서 지속적인 업데이트 중이며 현재 지원 중인 브라우저 정보는 하단 링크를 통해서 확인할 수 있습니다.

https://developers.google.com/maps/documentation/javascript/3.exp/reference

Google Maps Javascript API 현지화(언어 및 지역)

Google Maps상에 표현되는 기본 언어를 변경하거나 애플리케이션의 지역 코드를 설정하는 방식으로 Maps API 애플리케이션을 현지화할 수 있습니다. 그러면 지정된 국가나 영토에 따라 작동 방식이 변경됩니다.

언어 현지화

Google Maps API는 지도 위에 컨트롤 이름, 저작권 고지, 자동차 길 찾기, 레이블 등의 텍스트 정보를 표시할 때 브라우저의 선호 언어를 사용합니다. 대부분의 경우 이 방법이 선호되지만 Maps API가 브라우저 언어 설정을 무시하고 강제로 특정 언어로 정보를 표시하게 하고 싶다면, Maps API JavaScript 코드를 포함할 때 선택적 language 매개변수를 script 태그에 추가하여 사용할 언어를 지정할 수 있습니다.

예를 들어, 한국어로 Maps API 애플리케이션을 표시하려면 아래와 같이 &language=ko를 script 태그에 추가합니다.

참고: 위에 나오는 방식으로 API를 로드 하면 사용자 기본 설정과 관계없이 모든 사용자가 한국어를 사용하게 됩니다.

Maps Javascript API도 원래 왼쪽에서 오른쪽 방향(LTR)과 오른쪽에서 왼쪽 방향(RTL) 언어로 된 문자를 포함하는 양방향(Bidi) 텍스트를 지원합니다. RTL 언어의 예로는 아랍어, 히브리어, 페르시아어가 있습니다. 일반적으로 dir=’rtl’을 해당 페이지의 요소에 추가하여, RTL 언어 페이지가 올바로 렌더링되도록 지정해야 합니다. 다음 예시는 아랍어 컨트롤을 사용하여 이집트 카이로의 지도를 렌더링합니다.

지원되는 언어 목록은 다음 표와 같습니다.

Language Code	Language	Language Code	Language
ar	Arabic	kn	Kannada
bg	Bulgarian	ko	Korean
bn	Bengali	lt	Lithuanian
ca	Catalan	lv	Latvian
cs	Czech	ml	Malayalam
da	Danish	mr	Marathi
de	German	nl	Dutch
el	Greek	no	Norwegian
en	English	pl	Polish
en-AU	English (Australian)	pt	Portuguese
en-GB	English (Great Britain)	pt-BR	Portuguese (Brazil)
es	Spanish	pt-PT	Portuguese (Portugal)
eu	Basque	ro	Romanian
eu	Basque	ru	Russian
fa	Farsi	sk	Slovak
fi	Finnish	sl	Slovenian
fil	Filipino	sr	Serbian
fr	French	sv	Swedish
gl	Galician	ta	Tamil
gu	Gujarati	te	Telugu
hi	Hindi	th	Thai
hr	Croatian	tl	Tagalog
hu	Hungarian	tr	Turkish
id	Indonesian	uk	Ukrainian
it	Italian	vi	Vietnamese
iw	Hebrew	zh-CN	Chinese (Simplified)
ja	Japanese	zh-TW	Chinese (Traditional)

지역 현지화

maps.googleapis.com에서 Maps API를 로드 하면 애플리케이션 동작의 기본 편중이 미국으로 적용됩니다. 애플리케이션이 다른 지도 타일을 제공하도록 변경하거나 애플리케이션을 편중하고 싶다면(예: 지오코딩 결과를 해당 지역으로 편중), Maps API JavaScript 코드를 포함할 때 region 매개변수를 script 태그에 추가하는 방식으로 이 기본 동작을 재정의할 수 있습니다.

애플리케이션이 호스팅 되는 국가에 올바른 지역 현지화를 적용하여 애플리케이션이 현지 법률을 준수하게 하는 것은 Maps API 애플리케이션 개발자의 책임입니다.

egion 매개변수는 유니코드 지역 서브태그 식별자를 허용합니다. (일반적으로) 여기에는 국가 코드 최상위 수준 도메인(ccTLD)에 대한 1:1 매핑이 포함됩니다. 대부분의 유니코드 지역 식별자는 ISO 3166-1 코드와 동일하며, 몇몇 눈에 띄는 예외가 있습니다. 예를 들어, 영국의 ccTLD는 “uk”(도메인 .co.uk와 일치)이지만, 지역 식별자는 “GB”입니다.

예를 들어, 영국으로 현지화된 Maps API 애플리케이션을 사용하려면 아래와 같이 region=GB를 script 태그에 추가합니다.

참고: 한국의 경우 region코드는 KR 입니다.

다음 예시는 두 개의 지도를 보여줍니다. 하나는 기본 지역(미국)을 기준으로 “Toledo”를 “Toledo, Ohio”로 지오코딩하는 지도이고, 다른 하나는 ES(스페인)로 설정된 region을 기준으로 결과를 “Toledo, Spain”으로 편중하는 지도입니다.

한국의 경우 독도 및 동해 표기가 기본 설정 값은 각각 ‘리앙쿠르 암초’, 일본해(동해)로 표기가 되지만 region변수를 KR로 변경할 경우 독도, 동해로 표시됩니다.

상세 국가별 지도 커버리지와 지역코드(region code)는 아래 URL에서 확인 하실 수 있습니다.

https://developers.google.com/maps/coverage

예를 들어, 미국을 입력하면, 미국의 지역코드는 US이며, 배경지도(지도타일), 지오코딩, 교통량 레이어, 자동차 길 찾기, 자전거 길 찾기, 도보 길 찾기가 지원됨을 알 수 있습니다.

중국에서 Google Maps API 로드

Google Maps API는 중국에서는 http://maps.google.cn에서 제공됩니다. 중국에 콘텐츠를 제공할 때는 https://maps.googleapis.com을 http://maps.google.cn으로 교체합니다.

중국 사용자를 특별히 대상으로 하는 경우, 지역과 언어 매개변수도 추가할 수 있습니다. 이 API는 language 매개변수의 값으로 zh-CN(간체)과 zh-TW(번체)를 모두 지원합니다.

참고: 중국내의 Google Maps활용은 현지 사정에 의해 안될 경우도 발생할 수 있습니다. SPH에서는 Google Maps이 중국 내에서 활용 가능하도록, 유료고객에 한해 경유 서버를 운영하고 있습니다. 자세한 안내를 원하시면 연락처(support@sphinfo.co.kr, 02-785-9910)로 문의 주시기 바랍니다.

Tech Tip

지도 데이터가 많을 경우 마커 클러스터를 사용하는 가이드
거리, 면적 기능 구현 가이드

지도 데이터가 많을 경우 마커 클러스터를 사용하는 가이드

마커 클러스터링(Marker Clustering for Google Maps)

마커 클러스터링이란?

Google Maps상에 수백~수천 개의 마커를 표현한다면, 지도 가시화 속도와 마커 식별 이슈가 발생될 수 있습니다. 이런 경우의 대안으로 마커 클러스터를 활용하게 되는데 본 문서는 마커 클러스터를 사용하여 지도에 많은 수의 마커를 표시하는 방법을 제공합니다. MarkerClusterer 라이브러리를 Google Maps JavaScript API와 함께 사용하면 근접한 마커를 클러스터에 결합하고 지도의 마커 표시를 단순화 할 수 있습니다.

마커 클러스터링의 작동 방식을 보려면 아래지도를 참조하십시오.

클러스터의 숫자는 해당 마커의 수를 나타냅니다. 클러스터 위치를 확대하면 클러스터의 숫자가 줄어 들어 지도에 개별 마커가 표시되기 시작합니다. 지도를 확대하면 마커가 클러스터로 다시 통합됩니다.

아래 샘플은 이 지도를 만드는 데 필요한 전체 코드를 보여줍니다.

이 간단한 예제에서는 locations 배열을 사용하여 지도에 마커 세트를 추가합니다. 다른 소스를 사용하여 지도의 아이콘을 얻을 수 있습니다. 자세한 내용은 마커 만들기 가이드를 참조하십시오.

마커 클러스터링 적용해보기

MarkerClusterer 라이브러리는 지도를 특정 크기의 사각형 (각 확대 / 축소 레벨에 따라 크기가 변경됨)으로 나누고 각 사각형 격자에 마커를 그룹화하는 격자(그리드) 기반 클러스터링 기술을 사용합니다. 특정 마커에 클러스터를 만들고 해당 경계에 있는 마커를 클러스터에 추가합니다. 모든 마커가 지도의 줌 레벨을 기반으로 가장 가까운 격자 기반 마커 클러스터에 할당 될 때까지 이 과정을 반복합니다. 마커가 두 개 이상의 기존 클러스터 경계에 있는 경우 Maps JavaScript API는 각 클러스터에서 마커의 거리를 결정하여 가장 가까운 클러스터에 추가합니다.

MarkerClusterer 옵션을 설정하여 클러스터 위치를 조정하여 포함 된 모든 마커 간의 평균 거리를 반영 할 수 있습니다. 그리드 크기, 클러스터 아이콘, 클러스터 텍스트 등과 같은 다른 매개 변수를 수정하도록 MarkerClusterer를 사용자 정의 할 수도 있습니다.

마커 클러스터러 추가 하기

마커 클러스터러를 추가하려면 아래 단계를 따르십시오.

1. GitHub에서 마커 클러스터링 라이브러리 및 이미지를 가져 와서 앱에 액세스 할 수 있는 서버에 저장하십시오.

MarkerClusterer 용 JavaScript 라이브러리 및 이미지 파일은 GitHub에 저장 되어 있습니다. GitHub에서 앱에 액세스 할 수 있는 위치로 다음 파일을 다운로드 하거나 복사하십시오.

2. 페이지에 마커 클러스터링 라이브러리를 추가하십시오.

예제 코드에서 아래 스크립트는 https://developers.google.com에서 markerclusterer.js 라이브러리 파일의 위치를 지정합니다.

다운로드 파일을 저장 한 위치의 경로를 설정하시기 바랍니다.

3. 앱에 마커 클러스터러를 추가합니다. 아래 코드는 마커 클러스터러를 지도에 추가합니다.

이 샘플은 Marker 배열을 MarkerClusterer로 전달합니다. 또한 imagePath 매개 변수에 있는 다섯 개의 이미지 파일 모두의 위치를 지정합니다. 다운로드 하여 저장한 파일의 경로와 일치시키는 것을 잊지 마시기 바랍니다.

거리, 면적 기능 구현 가이드

Google Geometry 라이브러리 활용하기

Google Geometry 라이브러리는 Maps Javascript API를 로드 할 때 기본적으로 로드 되지 않습니다. libraries 부트스트랩 매개변수를 사용하여 명시적으로 지정해야 합니다.

Google Maps JavaScript API 기하학 라이브러리는 지표면의 기하학적 데이터를 계산하기 위한 유틸리티 함수를 제공합니다. 이 라이브러리에는 3개의 네임스페이스가 포함되어 있습니다.

spherical에는 위도와 경도에서 각도와 거리, 영역을 계산할 수 있는 구면 기하학 유틸리티가 포함됩니다.
encoding은 인코딩 된 폴리라인 알고리즘에 따라 폴리라인 경로를 인코딩/디코딩하는 유틸리티를 포함합니다.
poly에는 폴리곤 및 폴리라인과 관련된 연산을 위한 유틸리티 함수가 포함되어 있습니다.

google.maps.geometry 라이브러리는 클래스가 없는 대신 위의 네임스페이스에 정적 메서드가 포함되어 있습니다.

구면 기하학 개념

Google Maps JavaScript API 내의 이미지는 2차원이고 “평면”입니다. 그러나 지구는 3차원이며 대개 회전 타원체 또는 더 간단히 보면 구체에 가깝습니다. Maps API 내에서 우리는 구체를 사용하고, 지구를 컴퓨터 화면 등의 2차원 평면에 표현하기 위해 Maps API는 프로젝션(투영기법)을 사용합니다.

2차원으로 투영된 모양은 실제와 다르게 보일 수 있습니다. 지도 투영을 할 경우 어느 정도의 왜곡은 반드시 필요하기 때문에 단순한 유클리드 기하학을 적용할 수 없는 경우가 많습니다. 예를 들어, 구체에서 두 지점 간의 최단거리는 직선이 아니라 큰 원의 모양입니다.
이러한 차이로 인해 구체(또는 투영)에 대한 기하 함수는 구면 기하학을 사용하여 거리, 방위 및 영역 등의 구성체를 계산합니다. 이러한 구면 기하 구성체를 계산하는 유틸리티는 Maps API의 google.maps.geometry.spherical 네임스페이스에 포함되어 있습니다. 이 네임스페이스는 구면 좌표(위도와 경도)에서 스칼라 값(방향의 구별은 없고 하나의 수치만으로 완전히 표시)을 계산하기 위한 정적 메서드를 제공합니다.

거리 및 영역 함수

두 지점 간의 거리는 두 지점을 잇는 최단 경로의 길이입니다. 이 최단 경로를 측지(geodesic)라고 합니다. 구체에서 모든 측지는 거대한 원의 세그먼트입니다. 이 거리를 계산하려면 computeDistanceBetween()을 호출하고 2개의 LatLng 객체에 전달합니다.

여러 위치가 있는 경우, 대신 computeLength()를 사용하여 주어진 경로의 길이를 계산할 수 있습니다.

거리 결과는 미터 단위로 표현됩니다.

폴리곤 영역의 면적(제곱 미터)을 계산하려면 computeArea()를 호출하고 폐쇄 루프를 정의하는 LatLng 객체의 배열을 전달합니다.

탐색 함수

구체를 탐색할 때 방위는 고정된 기준점(일반적으로 정북)에서 방향의 각도를 나타냅니다. Google Maps API에서 방위는 정북에서 도(degree) 기준으로 정의됩니다. 여기서 방위는 정북(0도)에서부터 시계 방향으로 측정됩니다. computeHeading() 메서드를 호출하고 from과 to LatLng 객체에 전달하여 두 위치 간의 방위를 계산할 수 있습니다.

특정 방위, 원점 위치, 이동 거리(미터 단위)가 주어졌을 때, computeOffset()을 사용하여 도착지 좌표를 계산할 수 있습니다.

2개의 LatLng 객체와 0~1 사이의 값이 주어진 경우, interpolate() 메서드를 사용하여 목적지를 계산할 수도 있습니다. 이 메서드는 두 위치 간에 구면 선형 보간을 수행하며, 여기에서 값은 출발지에서 목적지까지 경로를 따라 이동하는 부분 거리를 나타냅니다.

다음 예시는 지도에서 두 지점을 클릭하면 두 개의 폴리라인을 생성하고(하나는 측지이고 다른 하나는 두 위치를 잇는 “직선”), 두 지점 간에 이동하는 방위를 계산합니다.

인코닝 메서드

Google Maps JavaScript API 내의 경로는 대개 LatLng 객체의 Array로 지정됩니다. 그러나 이러한 배열은 전달하기에는 용량이 큰 경우가 많습니다. 대신 Google의 폴리라인 인코딩 알고리즘을 사용하여 주어진 경로를 압축하고, 나중에 디코딩을 통해 압축을 해제할 수 있습니다.

geometry 라이브러리에는 폴리라인을 인코딩/디코딩하는 유틸리티를 위한 encoding 네임스페이스가 포함되어 있습니다.

정적 메서드 encodePath()는 주어진 경로를 인코딩합니다. LatLng의 배열 또는 (Polyline.getPath()에 의해 반환된) MVCArray를 전달할 수 있습니다.

인코딩된 경로를 디코딩하려면 decodePath()를 호출하고 이 메서드를 인코딩된 문자열에 전달하면 됩니다.

다음 예시는 미시시피 주 옥스퍼드 지도를 표시합니다. 지도를 클릭하면 폴리라인에 점이 추가됩니다. 폴리라인이 생성되면 그 아래에 인코딩이 나타납니다.

무엇을 도와드릴까요?

(주)SPH는 Google Cloud의 국내 Premier Partner로서 Google Maps의 Exclusive 파트너로서 다양한 사례와 자료를 보유하고 있습니다.

보다 자세한 내용을 원하시는 분께서는 오른쪽 버튼을 통하여 문의해주시기 바랍니다.