Umieść interaktywną mapę lub panoramę Street View na swojej stronie internetowej za pomocą prostego żądania HTTP – bez konieczności korzystania z języka JavaScript.
Koszty
Wszystkie żądania interfejsu Maps Embed API są dostępne bezpłatnie z nieograniczonym wykorzystaniem. Jednak do wszystkich żądań nadal wymagany jest prawidłowy klucz interfejsu Google Cloud API. Więcej informacji znajdziesz w artykule Wykorzystanie i rozliczenia.
Zanim zaczniesz
Aby utworzyć wbudowaną mapę na stronie internetowej, wykonaj wymagane czynności konfiguracyjne, klikając kolejno te karty:
Krok 1
Konsola
-
W konsoli Google Cloud na stronie selektora projektu kliknij Utwórz projekt, aby rozpocząć tworzenie nowego projektu Cloud.
-
Sprawdź, czy w projekcie Cloud włączone są płatności. Sprawdź, czy w Twoim projekcie są włączone płatności.
Google Cloud oferuje bezpłatny okres próbny. Okres próbny wygasa po 90 dniach lub po osiągnięciu przez konto kwoty 300 USD, zależnie od tego, co nastąpi wcześniej. Anuluj, kiedy chcesz. Google Maps Platform oferuje stałe 200 USD miesięcznie. Więcej informacji znajdziesz w artykułach Zwroty środków na koncie rozliczeniowym i Rozliczenia.
Pakiet SDK Cloud
gcloud projects create "PROJECT"
Dowiedz się więcej o pakiecie Google Cloud SDK, instalacji Cloud SDK i tych poleceniach:
Krok 2
Aby korzystać z Google Maps Platform, musisz włączyć interfejsy API lub pakiety SDK, których chcesz użyć w projekcie.
Konsola
Pakiet SDK Cloud
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
Dowiedz się więcej o pakiecie Google Cloud SDK, instalacji Cloud SDK i tych poleceniach:
Krok 3
Ten krok obejmuje tylko proces tworzenia klucza interfejsu API. Jeśli używasz klucza interfejsu API w środowisku produkcyjnym, zdecydowanie zalecamy ograniczenie tego klucza. Więcej informacji znajdziesz na stronie Korzystanie z kluczy API dotyczącej danej usługi.
Klucz interfejsu API to unikalny identyfikator używany do uwierzytelniania żądań powiązanych z projektem na potrzeby wykorzystania i rozliczania. Z projektem musi być powiązany co najmniej 1 klucz API.
Aby utworzyć klucz interfejsu API:
Konsola
-
Otwórz stronę Google Maps Platform > Dane logowania.
-
Na stronie Dane logowania kliknij Utwórz dane logowania > Klucz interfejsu API.
W oknie Utworzono klucz API wyświetli się nowo utworzony klucz API. -
Kliknij Zamknij.
Nowy klucz interfejsu API znajdziesz na stronie Dane logowania w sekcji Klucze API.
(Pamiętaj, aby ograniczyć dostęp do klucza API przed użyciem go w produkcji).
Pakiet SDK Cloud
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
Dowiedz się więcej o pakiecie Google Cloud SDK, instalacji Cloud SDK i tych poleceniach:
Generowanie elementu iframe
Klikaj kolejne opcje i dodaj lokalizację oraz klucz interfejsu API, aby wygenerować iframe dla swojej strony. Dodatkowe parametry i opcje znajdziesz w artykule Wstawianie mapy.
Testowanie elementu iframe
Aby wyświetlić element iframe w oknie przeglądarki HTML:
- Otwórz domyślny edytor tekstu. Na urządzeniu powinny być zainstalowane edytory tekstu, takie jak TextEdit lub Notatnik w systemie Windows.
- Utwórz plik HTML i nadaj mu nazwę
index.html
. Dodaj ten kod do wygenerowanego wcześniej iframe:
<html> <!-- Replace this code comment with your iframe. --> </html>
Zapisz plik HTML
index.html
.Wczytaj plik HTML w przeglądarce, przeciągając go z pulpitu do przeglądarki. W większości systemów operacyjnych można też dwukrotnie kliknąć plik.
Gratulacje! Właśnie skonfigurowałaś/skonfigurowałeś i utworzyłaś/utworzyłeś mapę za pomocą interfejsu Maps Embed API.
Czyszczę dane
Możesz usunąć projekt Google Cloud, aby zatrzymać naliczanie opłat za wszystkie zasoby używane w tym projekcie.
- W konsoli Google Cloud otwórz stronę Zarządzanie zasobami:
- Jeśli projekt, który chcesz usunąć, jest powiązany z organizacją, u góry strony kliknij i rozwiń listę organizacji.
- Na liście projektów wybierz projekt do usunięcia i kliknij Usuń.
- W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.
Dalsze kroki
Aby rozpocząć tworzenie aplikacji z użyciem interfejsu Maps Embed API, skonfiguruj projekt Google Cloud:
Lista dodatkowych parametrów i opcji, które możesz dodać do kodu iframe:
Rozszerzenie projektu Map za pomocą interfejsu JavaScript API: