Krótkie wprowadzenie do Maps Embed API

Umieść na swojej stronie interaktywną mapę lub panoramę Street View, korzystając z prostego żądania HTTP (bez JavaScriptu).

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 Korzystanie z usługi i rozliczenia.

Zanim zaczniesz

Aby utworzyć osadzoną mapę na swojej stronie internetowej, wykonaj wymagane czynności konfiguracyjne, klikając poniższe karty:

Krok 1

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.

   Uwaga: chociaż aby skonfigurować projekt Cloud, musisz skonfigurować konto rozliczeniowe, rzeczywiste użycie interfejsu Embed API jest dostępne bezpłatnie.

   Google Cloud oferuje okres próbny w wysokości 0,00 USD. Okres próbny kończy się po upływie 90 dni lub po naliczeniu na koncie opłat w wysokości 300 USD (w zależności od tego, co nastąpi wcześniej). W każdej chwili możesz anulować subskrypcję. Google Maps Platform oferuje cykliczne środki w wysokości 200 USD miesięcznie. Więcej informacji znajdziesz w artykułach Środki na koncie rozliczeniowym i Płatności.

(pakiet) SDK Cloud

gcloud projects create "PROJECT"

Przeczytaj więcej o Google Cloud SDK, instalacji pakietu SDK Cloud i poniższych poleceniach:

• gcloud projects create

Uwaga: jeśli nie planujesz zachować utworzonych zasobów w trakcie ćwiczenia, zamiast wybierać istniejący projekt, utwórz projekt. Po zakończeniu ćwiczenia możesz usunąć projekt wraz ze wszystkimi zasobami, które są z nim powiązane.

Krok 2

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

Konsola

Włączanie interfejsu Maps Embed API

(pakiet) SDK Cloud

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

Przeczytaj więcej o Google Cloud SDK, instalacji pakietu SDK Cloud i poniższych poleceniach:

• gcloud services enable
• gcloud services disable

Krok 3

Ten krok wykonuje się tylko w procesie tworzenia klucza interfejsu API. Jeśli używasz klucza interfejsu API w środowisku produkcyjnym, zdecydowanie zalecamy ograniczenie klucza interfejsu API. Więcej informacji znajdziesz na stronie Używanie kluczy interfejsu API w przypadku konkretnej usługi.

Klucz interfejsu API to unikalny identyfikator, który uwierzytelnia żądania powiązane z Twoim projektem na potrzeby użytkowania i rozliczeń. Musisz mieć co najmniej 1 klucz interfejsu API powiązany z projektem.

Aby utworzyć klucz interfejsu API:

Konsola

1. Otwórz stronę Google Maps Platform > Dane logowania.

   Otwórz stronę Dane logowania

2. Na stronie Dane logowania kliknij Utwórz dane logowania > Klucz interfejsu API.
   W oknie Utworzono klucz interfejsu API pojawi się nowo utworzony klucz interfejsu API.
3. Kliknij Zamknij.
   Nowy klucz interfejsu API znajdziesz na stronie Dane logowania w sekcji Klucze interfejsu API.
   (Pamiętaj, aby ograniczyć klucz interfejsu API, zanim użyjesz go w środowisku produkcyjnym.

(pakiet) SDK Cloud

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

Przeczytaj więcej o Google Cloud SDK, instalacji pakietu SDK Cloud i poniższych poleceniach:

• gcloud alpha services api-keys create

Generowanie elementu iframe

Kliknij poniższe opcje i dodaj lokalizację oraz klucz interfejsu API, aby wygenerować element iframe na potrzeby 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. Edytory tekstu, takie jak TextEdit czy Notatnik Microsoft Windows, powinny być domyślnie zainstalowane na urządzeniu.
2. Utwórz plik HTML i nadaj mu nazwę index.html.

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

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

4. Zapisz plik HTML index.html.

5. Plik HTML wczytuj w przeglądarce, przeciągając go z pulpitu do przeglądarki. W większości systemów operacyjnych dwukrotne kliknięcie pliku również działa.

Gratulacje! Właśnie udało Ci się skonfigurować i stworzyć mapę za pomocą interfejsu Maps Embed API.

Czyszczenie

Możesz usunąć swój projekt Google Cloud, aby zatrzymać naliczanie opłat za wszystkie zasoby w nim używane.

Uwaga: usunięcie projektu spowoduje, że:

• Cała zawartość projektu zostanie usunięta. Jeśli w tym samouczku był używany istniejący projekt, usunięcie go spowoduje również usunięcie wszystkich innych zadań wykonanych w tym projekcie.
• Niestandardowe identyfikatory projektów zostaną utracone. Podczas tworzenia tego projektu mógł zostać utworzony niestandardowy identyfikator projektu, którego chcesz używać w przyszłości. Aby zachować adresy URL, które używają identyfikatora projektu, np. adres URL appspot.com, usuń wybrane zasoby w projekcie, zamiast usuwać cały projekt.

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 połączony z organizacją, wybierz i rozwiń listę organizacji u góry strony.
3. Na liście projektów wybierz projekt do usunięcia, a następnie kliknij Usuń.
4. W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.

Dalsze kroki

• Zacznij programowanie za pomocą interfejsu Maps Embed API po skonfigurowaniu projektu Google Cloud:

  Skonfiguruj w Cloud Console

• Listę dodatkowych parametrów i opcji, które możesz dodać w elemencie iframe:

  Umieszczanie mapy

• Rozszerz swój projekt Map za pomocą interfejsu JavaScript API:

  Maps JavaScript API