更新日時 2022年 8月 3日
インタラクティブなGoogleマップをHubSpotコンテンツに追加するには、マップの埋め込みコードをコピーしてHTMLモジュールに追加します。
Googleマップの埋め込みコードを取得する
- Googleマップに移動します。
- 検索バーに住所を入力します。
- 住所のリストで、［共有］をクリックします。
- ダイアログボックスで、［マップを埋め込む］タブをクリックします。
- マップサイズのドロップダウンメニューをクリックしてサイズを1つ選択します。
- ［HTMLをコピー］をクリックして、マップの埋め込みコードをコピーします。
ドラッグ＆ドロップエディターでGoogleマップを追加する
- HubSpotアカウントにて、ナビゲーションバーに表示される［マーケットプレイスアイコン ］をクリックします。
- [モジュール]タブをクリックします。
- 検索バーにHTMLを入力します。
- HTMLモジュールをクリックします。
- 右上の[無料でモジュールを取得]をクリックします。モジュールのインストールが完了するまでに数分かかる場合があります。
-
モジュールのインストールが完了したら、コンテンツに移動します。
- ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
- ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
- ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
- コンテンツの上にカーソルを重ねて［編集］をクリックします。
- コンテンツエディターで、サイドバーエディターの検索バーに「HTML」と入力します。
- HTMLモジュールをクリックし、コンテンツ内の位置までそれをドラッグします。
- ［HTMLモジュール］をクリックして編集します。
- サイドバーエディターで、Googleマップの埋め込みコードを貼り付けます。
ドラッグ＆ドロップエリアのないコンテンツにGoogleマップを追加する
コンテンツにドラッグ＆ドロップエリアがない場合、HTMLモジュールをテンプレートに直接追加して、コンテンツエディターでHTMLモジュールを編集する必要があります。
HTMLモジュールをテンプレートに追加する
- HubSpotアカウントで、ブログ、ウェブサイトページ、またはランディングページに移動します。
- コンテンツの上にカーソルを重ねて［編集］をクリックします。
- ［設定］タブをクリックし、［詳細オプション］をクリックします。
- ［テンプレート］セクションで、［このテンプレートを編集］をクリックします。
- デザインマネージャーで、インスペクター内の［+追加］をクリックします。
- 検索バーに「HTML」と入力します。
- HTMLモジュールをクリックし、テンプレート内の位置までそれをドラッグします。
- 右上の［変更を公開］をクリックします。
埋め込みコードをHTMLモジュールに挿入する
- HubSpotアカウントで、ブログ、ウェブサイトページ、またはランディングページに移動します。
- コンテンツの上にカーソルを重ねて［編集］をクリックします。
- コンテンツエディターで、［HTMLモジュール］をクリックします。
- サイドバーエディターで、Googleマップの埋め込みコードを貼り付けます。
