Umieść interaktywną mapę lub panoramę Street View na swojej stronie internetowej za pomocą prostego żądania HTTP – nie jest wymagany kod 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 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 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 przekroczeniu limitu płatności w wysokości 300 USD, zależnie od tego, co nastąpi wcześniej. Anuluj w każdej chwili. Google Maps Platform oferuje stałe 200 USD miesięcznie. Więcej informacji znajdziesz w artykułach Środki 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 płatności. 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 nazwij go
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ą, wybierz i rozwiń listę organizacji u góry strony.
- 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 zacząć tworzyć aplikacje 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:
Rozszerz projekt Map za pomocą interfejsu JavaScript API: