GoogleマップをHubSpotコンテンツに追加する

地図の埋め込みコードをコピーしてリッチ テキスト モジュールに挿入することで、インタラクティブなGoogle地図をHubSpotコンテンツに追加できます。この方法は、コンテンツエディターと、リッチ テキスト モジュールをサポートするテンプレートで機能します。 

始める前に

Google MapをHubSpotコンテンツに追加する前に、次の要件と考慮事項を確認してください。 

制限事項と考慮事項について

• 埋め込み Google マップは Google によって管理されています。表示動作、スタイル、機能は、Google の埋め込み設定によって異なります。 

Googleマップの埋め込みコードを取得する

1. 「Googleマップ」に移動します。
2. 検索バーに住所を入力します。 
3. アドレスの一覧で、［共有］をクリックします。

4. ダイアログボックスで、［マップを埋め込む］タブをクリックします。 
5. ［マップサイズ］のドロップダウンメニューをクリックしてサイズを1つ選択します。 
6. [HTML のコピー] をクリックして、マップの埋め込みコードをコピーします。

コンテンツエディターでGoogleマップを追加します 

1. 目的のコンテンツに移動します。

   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. コンテンツの名前をクリックします。 
3. コンテンツエディターで、左サイドバーのadd 「追加」アイコンをクリックします。 
4. Textセクションをクリックして展開し、「リッチテキスト」モジュールをクリックしてドラッグします。
5. リッチテキストツールバーの「詳細」ドロップダウンメニューをクリックし、「ソースコード」を選択します。 
6. ダイアログボックスで、マップの埋め込みコードを貼り付け、[ 保存 ] をクリックします。 

7. 変更内容を公開するには、右上の［公開］または［更新］をクリックします。

テンプレートにGoogle マップを追加する

ドラッグ&ドロップテンプレート または コードテンプレート にリッチ テキスト モジュールが含まれていない場合は、デザインマネージャーで追加してください。テンプレートを公開したら、コンテンツエディターでリッチテキストモジュールを編集します。

リッチ テキスト モジュールをドラッグ&ドロップテンプレートに追加する

リッチ テキスト モジュールをドラッグ&ドロップテンプレートに追加して、コンテンツエディターでGoogleマップを追加できるようにします。ドラッグ&ドロップテンプレートでモジュールを使用する方法について詳細をご確認ください。 

1. 目的のコンテンツに移動します。

   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. コンテンツの名前をクリックします。 
3. 設定メニューをクリックし、テンプレートを選択する。 
4. このテンプレートを編集するをクリックする。デザインマネージャーが表示されます。
5. インスペクターで [+追加]をクリックします。 
6. 検索バーで、リッチテキストを入力します。 

7. リッチテキストのモジュールをクリックし、テンプレート上の位置にドラッグします。 
8. 右上の［変更を公開］をクリックします。
9. コンテンツエディターで、続けてGoogleマップを追加します。

リッチ テキスト モジュールをコードテンプレートに追加する

Googleマップをコンテンツエディターに追加できるように、リッチテキストモジュールをコードテンプレートに追加します。コードテンプレートでモジュールを使用する方法について詳細をご確認ください。 

1. 目的のコンテンツに移動します。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. コンテンツの名前をクリックします。
3. [設定]メニューをクリックし、[ テンプレート]を選択します。
4. [このテンプレートを編集]をクリックします。
5. コードエディターで、地図が表示される場所に リッチ テキスト モジュール を追加します。以下に例を示します。

{%モジュール
"map_embed"
path="@hubspot/rich_text"
label="Google Map" %}

6. 右上の［変更を公開］をクリックします。
7. 続けてリッチ テキスト モジュールでGoogleマップを追加します。