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

HubSpotのコンテンツにインタラクティブなGoogleマップを追加するには、マップの埋め込みコードをコピーして、リッチテキストモジュールのソースコードに追加することができます。

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

• Google Mapsに移動します。
• 検索バーに住所を入力します。 
• アドレスの一覧で、［共有］をクリックします。

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

ドラッグ＆ドロップエディターでGoogleマップを追加する

• コンテンツを開きます。

  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。
  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで、左サイドバーのadd Addアイコンをクリックします。 
• 番目の列で、共通をクリックすると、共通モジュールが表示されます。 
• リッチテキストモジュールをクリックし、コンテンツ内の所定の位置にドラッグします。
• リッチテキストツールバーの「詳細」ドロップダウンメニューをクリックし、「ソースコード」を選択します。 
• ダイアログボックスで、マップの埋め込みコードを貼り付け、[ 保存 ] をクリックします。 

• 変更内容をライブにするには、右上のPublishまたはUpdateをクリックし、ダイアログボックスのPublish nowまたはUpdate nowをクリックします。

ドラッグ＆ドロップエリアのないコンテンツにGoogleマップを追加する

コンテンツにドラッグ＆ドロップエリアがない場合は、テンプレートに直接リッチテキストモジュールを追加し、コンテンツエディターでリッチテキストモジュールを編集する必要があります。 

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

• モジュールのインストールが完了したら、あなたのコンテンツに移動します。

  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。
  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• ファイルメニューをクリックし、ページ設定またはブログ設定を選択する。 
• ダイアログボックスで、左サイドバーメニューの「テンプレート」をクリックします。 
• このテンプレートを編集するをクリックする。

• デザインマネージャーで、インスペクターの「＋追加」をクリックします。 
• 検索バーで、リッチテキストを入力します。 
• リッチテキストモジュールをクリックし、テンプレートの位置にドラッグします。 
• 右上の［変更を公開］をクリックします。

リッチテキストモジュールに埋め込みコードを挿入する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで、リッチテキストモジュールをクリックします。 
• リッチテキストツールバーの「詳細」ドロップダウンメニューをクリックし、「ソースコード」を選択します。 
• ダイアログボックスで、マップの埋め込みコードを貼り付け、[ 保存 ] をクリックします。 

• 変更内容をライブにするには、右上のPublishまたはUpdateをクリックし、ダイアログボックスのPublish nowまたはUpdate nowをクリックします。