ヘルプセンター

グーグルマップの追加方法

グーグルマップを追加する方法については、このチュートリアルをご覧になるか、以下のガイドをお読みください。

グーグルがグーグルマップの使用ルールを変更した。Googleマップをウェブサイトに追加するには、JavaScript APIのキーを取得し、マップブロックの設定でそれを指定し、Googleアカウントにバンドカードをリンクする必要があります。

https://console.cloud.google.com/google/maps-apis/overview.
新しいプロジェクトを作成するか、既存のプロジェクトを選択します。Createをクリックする。

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

Maps JavaScript APIを選択します。

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

Enableをクリックしてサービスを有効にする。

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

Credentials」タブに移動し、API & ServicesのCredentialsをクリックする。

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

次に、Create Credentialsをクリックし、ドロップダウンリストでAPIキーを選択します。

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

ポップアップウィンドウで「キーを制限」をクリックする。

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

HTTP リファラー (Web サイト)」チェックボックスを選択し、リファラーボックスにドメイン名を入力してマップを認証してから、「Restrict key (制限キー)」チェックボックスを選択します。"チェックボックスを選択します。

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".

ヒントとコツ： https://tilda.cc/*はオプションです。.cc/* はオプションです。これはTilda エディターでマップのプレビューを有効にします。

ウェブサイトの編集が完了したら、セキュリティのために 2 番目のエントリを削除してください。API キーを保護する方法については、こちらをご覧ください。

ドロップダウンリストで、Maps JavaScript APIを選択し、変更を保存します。

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

注：Google Mapsは最近ポリシーを変更したため、キーを取得する前にアカウントで課金を有効にする必要があります。Google Mapsの料金についてはこちらをご覧ください。

請求」タブで銀行カードをアカウントにリンクします。

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

完了したら、Credentialsに行き、キーをコピーする。

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

Tilda のプロジェクトにアクセスし、"Other "カテゴリーから地図を含むブロックをページに追加し（例：Т143）、ブロックのコンテンツパネルを開き、"Map API Key "フィールドにキーを貼り付けます。変更を保存し、ページを公開します。

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

トラブルシューティング

Q:マップブロックにAPIキーを入力しましたが、マップは公開バージョンのページにしか表示されません。エディターで "Oops！Something went wrong "というエラーが表示されます。どうすれば解決できますか？

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

A:このエラーは通常、APIキーが制限された後に発生します。第三者が自分のウェブサイトでAPIキーを使用するのを防ぐために、ドメイン名のみにアクセスできるようにすることをお勧めします。API キーを保護する方法については、こちらをご覧ください。

Tilda Editor でマッププレビューを一時的に有効にするには、Google Maps Platform でhttps://tilda.cc/* を認証し、後でアクセスを取り消します。