개념 | Google Maps Javascript API

모바일 기기용 개발

Google Maps JavaScript API는 모바일 기기에서 신속하게 로드되고 잘 작동하도록 설계되었습니다. 특히, Android와 iOS 핸드셋 등의 고급 모바일 기기용 개발에 초점을 맞추고 있습니다. 모바일 기기는 데스크톱의 일반 브라우저보다 화면 크기가 작습니다. 또한, 대개 이러한 기기에만 특정한 동작이 있습니다(예: "손가락을 모아서 확대/축소"). 애플리케이션이 모바일 기기에서 잘 작동하도록 하려면 다음을 수행하도록 권장합니다.

지도를 포함하는 <div>가 100%의 너비 및 높이 특성을 갖도록 설정합니다. 그러나 일부 구형 데스크톱 브라우저는 이 값으로 화면을 제대로 표시하지 못할 수도 있습니다.

DOM 내에서 navigator.userAgent 속성을 검사하여 iPhone과 Android 기기를 인식할 수 있습니다.

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

각 기기의 화면 자원을 변경하기 위해 여기서 수행했던 것처럼, 이를 통해 특정 기기의 레이아웃을 변경할 수 있습니다.

Android 및 iOS 기기는 다음 <meta> 태그를 준수합니다.
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
```
이 설정은 지도를 전체 화면으로 표시해야 하고 사용자가 크기를 조절할 수 없다고 지정합니다. IPhone의 Safari 브라우저는 이 <meta> 태그를 해당 페이지의 <head> 요소 내에 포함해야 합니다.

iPhone 개발에 대한 자세한 내용은 Apple 개발자 문서를 참조하세요. Android 기기 개발에 대한 자세한 내용은 Android 개발자 문서를 참조하세요.

현지화

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

언어 현지화

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja"
type="text/javascript">
</script>

참고: 위에 나오는 방식으로 API를 로드하면 사용자 기본 설정과 관계없이 모든 사용자가 일본어를 사용하게 됩니다. 이 옵션을 설정하기 전에 이 동작을 원하는지 확인하세요.

예시 보기(map-language.html)

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

예시 보기(map-rtl.html)

지원되는 언어 목록도 참조하세요. 지원되는 언어는 자주 업데이트되므로 목록이 완전하지 않을 수 있습니다.

지역 현지화

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

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

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

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

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"
type="text/javascript">
</script>

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

중국에서 API 로드

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

<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>

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

<script src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key=YOUR_API_KEY"
type="text/javascript">
</script>

버전 관리

Google Maps JavaScript API 팀은 새로운 기능, 버그 수정, 성능 개선으로 API를 정기적으로 업데이트합니다. Google Maps JavaScript API 부트스트랩 요청의 v 매개변수를 지정하여 애플리케이션에서 로드할 API의 버전을 나타낼 수 있습니다. 버전 관리에 대해 자세히 알아보세요.

개념

모바일 기기용 개발

현지화

언어 현지화

지역 현지화

중국에서 API 로드

버전 관리

다음에 대한 의견 보내기...