모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

개념

모바일 기기용 개발

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 개발자 문서를 참조하세요.

현지화

기본 언어 설정을 변경하고 지역 코드를 지정하여 Google Maps JavaScript API 애플리케이션을 현지화할 수 있으며, 이 경우 해당 국가나 영토에 따라 지도 동작이 바뀝니다. 지도 현지화를 참조하세요.

버전 관리

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

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

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.