Maps Embed API 빠른 시작

JavaScript가 필요 없는 간단한 HTTP 요청으로 대화형 지도나 스트리트 뷰 파노라마를 웹페이지에 배치할 수 있습니다.

비용

모든 Maps Embed API 요청은 무료로 사용할 수 있습니다. 하지만 모든 요청에는 유효한 Google Cloud API 키가 필요합니다. 자세한 내용은 사용량 및 결제를 참고하세요.

시작하기 전에

웹페이지에 삽입된 지도를 만들려면 다음 탭을 클릭하여 필요한 설정 단계를 완료하세요.

1단계

콘솔

  1. Google Cloud 콘솔의 프로젝트 선택기 페이지에서 프로젝트 만들기를 클릭하여 새 Cloud 프로젝트를 만듭니다.

    프로젝트 선택기 페이지로 이동

  2. Cloud 프로젝트에 결제가 사용 설정되어 있어야 하므로 프로젝트에 결제가 사용 설정되어 있는지 확인합니다.

    Google Cloud에서는 무료 체험판을 제공합니다. 무료 체험판은 90일 후 또는 계정에서 300달러에 해당하는 누적 비용이 발생한 시점 중 더 빠른 시점에 만료됩니다. 취소는 언제든지 가능합니다. Google Maps Platform에서는 매월 200달러의 크레딧을 제공합니다. 자세한 내용은 결제 계정 크레딧 및 결제를 참고하세요.

Cloud SDK

gcloud projects create "PROJECT"

Google Cloud SDK, Cloud SDK 설치 및 다음 명령어에 대해 자세히 알아보세요.

2단계

Google Maps Platform을 사용하려면 프로젝트에 사용할 API 또는 SDK를 사용 설정해야 합니다.

콘솔

Maps Embed API 사용 설정

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Google Cloud SDK, Cloud SDK 설치 및 다음 명령어에 대해 자세히 알아보세요.

3단계

이 단계에서는 API 키만 만듭니다. 프로덕션에서 API 키를 사용하는 경우 API 키를 제한하는 것이 좋습니다. 자세한 내용은 제품별 API 키 사용 페이지를 참고하세요.

API 키는 사용 및 결제 목적으로 프로젝트와 관련된 요청을 인증하는 고유 식별자입니다. 프로젝트에 연결된 API 키가 하나 이상 있어야 합니다.

API 키를 만들려면 다음 단계를 따르세요.

콘솔

  1. Google Maps Platform > 사용자 인증 정보 페이지로 이동합니다.

    사용자 인증 정보 페이지로 이동하기

  2. 사용자 인증 정보 페이지에서 사용자 인증 정보 만들기 > API 키를 클릭합니다.
    API 키 생성 완료 대화상자에 새로 만든 API 키가 표시됩니다.
  3. 닫기를 클릭합니다.
    새 API 키는 사용자 인증 정보 페이지의 API 키 아래 나열됩니다.
    (프로덕션에 사용하기 전에 API 키를 제한하세요.)

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

Google Cloud SDK, Cloud SDK 설치 및 다음 명령어에 대해 자세히 알아보세요.

iframe 생성

다음 옵션을 클릭하고 위치와 API 키를 추가하여 웹페이지의 iframe을 생성합니다. 추가 매개변수와 옵션은 지도 삽입을 참조하세요.

iframe 테스트

HTML 브라우저 창에서 iframe을 보려면 다음 단계를 따르세요.

  1. 기본 텍스트 편집기를 엽니다. TextEdit 또는 Microsoft Windows Notepad와 같은 텍스트 편집기가 기기에 기본적으로 설치되어 있어야 합니다.
  2. HTML 파일을 만들고 이름을 index.html로 지정합니다.

  3. 위에서 생성한 iframe에 다음 코드를 추가합니다.

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. index.html HTML 파일을 저장합니다.

  5. HTML 파일을 데스크톱에서 브라우저로 드래그하여 웹브라우저에 로드합니다. 파일을 더블클릭해도 대부분의 운영체제에서 작동합니다.

축하합니다! Maps Embed API를 사용하여 지도를 설정하고 작성했습니다.

삭제

Google Cloud 프로젝트를 삭제하면 해당 프로젝트 내에서 사용되는 모든 리소스에 대한 청구가 중단됩니다.

  1. Google Cloud Console에서 리소스 관리 페이지로 이동합니다.

    리소스 관리 페이지로 이동

  2. 삭제할 프로젝트가 조직에 연결되어 있으면 페이지 상단에서 조직 목록을 선택하고 펼칩니다.
  3. 프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제를 클릭합니다.
  4. 대화상자에서 프로젝트 ID를 입력하고 종료를 클릭하여 프로젝트를 삭제합니다.

다음 단계

  • Google Cloud 프로젝트를 설정하여 Maps Embed API를 사용한 개발을 시작합니다.

    Cloud 콘솔에서 설정

  • iframe에 추가할 수 있는 추가 매개변수와 옵션 목록을 보려면 다음을 참조하세요.

    지도 삽입

  • 다음과 같이 JavaScript API로 지도 프로젝트를 확장합니다.

    Maps JavaScript API