ヘルプセンター

グーグルマップを追加する方法

Google マップの追加方法に関するこのチュートリアルを視聴するか、以下のガイドをお読みください。

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

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

[ Maps JavaScript API] を選択します。

[有効にする]をクリックしてサービスをアクティブ化します。

「資格情報」タブに移動し、 API & サービスの資格情報をクリックします。

次に、[ 資格情報の作成 ] をクリックし、ドロップダウンリストで [API キー ] を選択します。

ポップアップウィンドウで[ キーの制限 ]をクリックします。

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

ヒントとコツ: https://tilda.cc/*の入力はオプションです。Tildaエディタでマッププレビューを有効にします。それ以外の場合、マップにはドメインリンクを介してのみアクセスできます。

Webサイトの編集が終了したら、セキュリティ上の理由から2番目のエントリを削除します。詳しくは、API キーを保護する方法をご覧ください。

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

注: Google マップでは最近ポリシーが変更されたため、キーを取得する前にアカウントでお支払いを有効にする必要があります。詳しくは、Google マップの料金についての説明をご覧ください。

[請求]タブに移動して、銀行カードをアカウントにリンクします。

完了したら、資格情報に移動してキーをコピーします。

Tildaのプロジェクトに移動し、「その他」カテゴリのマップを含むブロック(Т143など)をページに追加し、ブロックの[コンテンツ]パネルを開いて、[マップAPIキー]フィールドにキーを貼り付けます。変更を保存し、ページを公開します。

トラブルシューティング

質問: マップブロックにAPIキーを入力しましたが、マップはページの公開バージョンにのみ表示されます。エディターで、エラー「おっと!問題が発生しました」が発生します。どうすれば解決できますか?

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

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