Krótkie wprowadzenie do Maps Embed API

Umieść interaktywną mapę lub panoramę Street View na stronie internetowej za pomocą żądania HTTP – nie jest wymagany niestandardowy kod JavaScript.

Koszty

Wszystkie żądania do interfejsu Maps Embed API są dostępne bezpłatnie i bez ograniczeń. Wszystkie żądania nadal wymagają jednak prawidłowego klucza interfejsu Google Cloud API. Więcej informacji znajdziesz w artykule Użycie i rozliczenia.

Zanim zaczniesz

Aby utworzyć mapę umieszczoną na stronie internetowej, wykonaj te wymagane czynności konfiguracyjne:

Krok 1. Skonfiguruj projekt

Konsola

  1. W konsoli Google Cloud na stronie selektora projektów kliknij Utwórz projekt, aby rozpocząć tworzenie nowego projektu Cloud.

    Otwórz stronę selektora projektów

  2. Sprawdź, czy w projekcie Cloud włączone są płatności. Sprawdź, czy w projekcie są włączone płatności.

    Google Cloud oferuje bezpłatny okres próbny. Okres próbny kończy się po 90 dniach lub po naliczeniu na koncie opłat w wysokości 300 USD (w zależności od tego, co nastąpi wcześniej). Możesz zrezygnować w każdej chwili. Więcej informacji znajdziesz w artykułach o środkach na koncie rozliczeniowym i rozliczeniach.

Pakiet SDK Cloud

gcloud projects create "PROJECT"

Więcej informacji o pakiecie SDK Google Cloud, instalacji pakietu SDK Cloud i tych poleceniach:

Krok 2. Włącz interfejsy API lub pakiety SDK

Aby korzystać z Google Maps Platform, musisz włączyć interfejsy API lub pakiety SDK, których chcesz używać w projekcie.

Konsola

Włączanie interfejsu Maps Embed API

Pakiet SDK Cloud

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

Więcej informacji o pakiecie SDK Google Cloud, instalacji pakietu SDK Cloud i tych poleceniach:

Krok 3. Uzyskaj klucz interfejsu API

Ten krok dotyczy tylko procesu tworzenia klucza interfejsu API. Jeśli używasz klucza interfejsu API w środowisku produkcyjnym, zdecydowanie zalecamy jego ograniczenie. Więcej informacji znajdziesz na stronie Korzystanie z kluczy interfejsu API dotyczącej konkretnej usługi.

Klucz interfejsu API to unikalny identyfikator używany do uwierzytelniania żądań powiązanych z projektem na potrzeby wykorzystania i płatności. Z projektem musi być powiązany co najmniej 1 klucz interfejsu API. Aby utworzyć nowy klucz lub dodać interfejs API bądź pakiet SDK do istniejącego klucza, wykonaj te instrukcje.

Konsola

  1. Otwórz stronę Google Maps Platform > Klucze i dane logowania.

    Otwórz stronę Klucze i dane uwierzytelniające

  2. Jeśli pojawi się taka prośba, wybierz projekt.

  3. Wykonaj jedną z tych czynności:

    • Utwórz nowy klucz:

      1. Kliknij Utwórz dane logowania > Klucz interfejsu API.
      2. W panelu Utwórz klucz interfejsu API otwórz listę Wybierz ograniczenia interfejsu API.
      3. Odznacz wszystkie interfejsy API, których ten klucz nie potrzebuje, i upewnij się, że Maps Embed API pozostaje zaznaczony.
      4. Kliknij Utwórz. W panelu pojawi się nowy klucz interfejsu API.

    • Użyj istniejącego klucza:

      1. Kliknij nazwę klucza.
      2. Na liście Wybierz ograniczenia interfejsu API wybierz Maps Embed API.
      3. Kliknij Zapisz.

    Wybranie interfejsu API w tym miejscu nie powoduje jego włączenia. Sprawdź, czy interfejs Maps Embed API jest włączony na stronie Biblioteka API.

  4. Aby później wyświetlić ciąg klucza, otwórz stronę Klucze i dane uwierzytelniające i kliknij Pokaż klucz.

Jeśli konsola wygląda inaczej niż w tych krokach, zapoznaj się z artykułami Tworzenie klucza interfejsu API i Dodawanie ograniczeń interfejsu API w dokumentacji Google Cloud.

Pakiet SDK Cloud

W poniższych poleceniach zastąp PROJECT_ID identyfikatorem swojego projektu.

  • Utwórz nowy klucz: uruchom to polecenie i zastąp DISPLAY_NAME nazwą klucza. 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    Więcej informacji o pakiecie SDK Google Cloud, instalacji pakietu SDK Cloud i tych poleceniach:

  • Użyj istniejącego klucza: uruchom to polecenie i zastąp KEY_ID identyfikatorem klucza. Flaga --append zachowuje interfejsy API, które klucz już dopuszcza. Bez niego polecenie zastępuje je.

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    Więcej informacji o pakiecie SDK Google Cloud, instalacji pakietu SDK Cloud i tych poleceniach:

    Identyfikator klucza nie jest ciągiem klucza ani wyświetlaną nazwą. Aby go znaleźć, uruchom gcloud services api-keys list --project="PROJECT_ID". Identyfikator to ostatnia część pola name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Aby zobaczyć ciąg klucza, uruchom gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID".

Generowanie elementu iframe

Kliknij opcje poniżej i dodaj lokalizację oraz klucz interfejsu API, aby wygenerować element iframe dla swojej strony internetowej. Dodatkowe parametry i opcje znajdziesz w artykule Umieszczanie mapy.

Testowanie elementu iframe

Aby wyświetlić element iframe w oknie przeglądarki HTML:

  1. Otwórz domyślny edytor tekstu. Na urządzeniu powinny być domyślnie zainstalowane edytory tekstu, takie jak TextEdit lub Notatnik systemu Microsoft Windows.
  2. Utwórz plik HTML i nadaj mu nazwę index.html.

  3. Dodaj ten kod z wygenerowanym powyżej elementem iframe:

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

  4. Zapisz plik HTML index.html.

  5. Wczytaj plik HTML w przeglądarce, przeciągając go z pulpitu do przeglądarki. W większości systemów operacyjnych możesz też kliknąć plik dwukrotnie.

Gratulacje! Udało Ci się skonfigurować i utworzyć mapę za pomocą interfejsu Maps Embed API.

Czyszczę dane

Możesz usunąć projekt w chmurze Google Cloud, aby zatrzymać naliczanie opłat za wszystkie zasoby używane w tym projekcie.

  1. W konsoli Google Cloud otwórz stronę Zarządzanie zasobami:

    Otwórz stronę Zarządzanie zasobami

  2. Jeśli projekt, który chcesz usunąć, jest powiązany z organizacją, wybierz i rozwiń listę organizacji u góry strony.
  3. Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
  4. W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.

Dalsze kroki