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

インタラクティブなGoogleマップをHubSpotコンテンツに追加するには、マップの埋め込みコードをコピーしてHTMLモジュールに追加します。

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

• Googleマップに移動します。
• 検索バーに住所を入力します。 
• 住所のリストで、［共有］をクリックします。

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

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

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

  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで、サイドバーエディターの検索バーに「HTML」と入力します。 
• HTML モジュールをクリックし、コンテンツ内の所定の位置にドラッグします。 

• HTMLモジュールをクリックして、編集します。
• サイドバーエディタに、Google Mapの埋め込みコードを貼り付けます。

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

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

HTMLモジュールをテンプレートに追加する

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

  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。

• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• ［設定］タブをクリックし、［詳細オプション］をクリックします。
• ［テンプレート］セクションで、［このテンプレートを編集］をクリックします。
• デザインマネージャーで、インスペクター内の［+追加］をクリックします。 
• 検索バーに「HTML」と入力します。 
• HTMLモジュールをクリックし、テンプレート内の位置までそれをドラッグします。 

• 右上の［変更を公開］をクリックします。

埋め込みコードをHTMLモジュールに挿入する

• HubSpotアカウントで、ブログ、ウェブサイトページ、またはランディングページに移動します。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで、［HTMLモジュール］をクリックします。
• サイドバーエディターで、Googleマップの埋め込みコードを貼り付けます。