Jak dodać Mapy Google

Obejrzyj ten samouczek dotyczący dodawania Map Google lub przeczytaj poniższy przewodnik.

Google zmieniło zasady korzystania z Map Google. Aby dodać mapę Google do swojej witryny, musisz teraz uzyskać klucz do JavaScript API, określić go w ustawieniach bloku mapy i połączyć kartę zespołu z kontem Google.

Przejdź do strony:
https://console.cloud.google.com/google/maps-apis/overview.
Utwórz nowy projekt lub wybierz istniejący. Kliknij przycisk Utwórz.

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Wybierz Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Aktywuj usługę, klikając Włącz.

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Przejdź do zakładki "Credentials" i kliknij Credentials w APIs & Services.

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

Następnie kliknij Create Credentials i wybierz klucz API z rozwijanej listy.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Kliknij Restrict Key w wyskakującym oknie.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" pop-up window.

Zaznaczpole wyboru "HTTP referrers (web sites)" , wpisz nazwę domeny w polu referrer, aby autoryzować mapę, a następnie wybierz "Restrict key" pole wyboru.

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

Porady i wskazówki: wpis https://tilda.cc/* jest opcjonalny. Umożliwia on podgląd mapy w edytorze Tilda . W przeciwnym razie mapa będzie dostępna tylko za pośrednictwem łącza do domeny.

Po zakończeniu edycji witryny usuń drugi wpis ze względów bezpieczeństwa. Dowiedz się więcej o tym , jak zabezpieczyć klucz API.

Z listy rozwijanej wybierz Maps JavaScript API i zapisz zmiany.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

Uwaga: Mapy Google niedawno zmieniły swoje zasady, więc teraz musisz włączyć rozliczenia na swoim koncie przed otrzymaniem klucza. Dowiedz się więcej o cenach Google Maps.

Przejdź do zakładki "Rozliczenia", aby połączyć kartę bankową ze swoim kontem.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Gdy skończysz, przejdź do Credentials i skopiuj klucz.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

Przejdź do swojego projektu na stronie Tilda, dodaj blok z mapą z kategorii "Inne" do strony (na przykład Т143), otwórz panel Zawartość bloku i wklej klucz w polu "Klucz API mapy". Zapisz zmiany i opublikuj stronę.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

Rozwiązywanie problemów

P: Wprowadziłem klucz API w bloku mapy, ale mapa pojawia się tylko na opublikowanej wersji strony. W edytorze pojawia się błąd "Ups! Coś poszło nie tak". Jak mogę go rozwiązać?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

O: Ten błąd występuje zwykle po ograniczeniu klucza API. Aby uniemożliwić stronom trzecim korzystanie z klucza API w ich witrynie, zalecamy zapewnienie dostępu tylko do nazwy domeny. Dowiedz się więcej o tym , jak zabezpieczyć klucz API.

Aby tymczasowo włączyć podgląd mapy w edytorze Tilda , autoryzuj https://tilda.cc/* na platformie Map Google i cofnij dostęp później.