メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

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

更新日時 2022年 8月 3日

対象製品

すべての製品とプラン

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


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

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

search-for-address-in-google-maps-

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

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

  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • [モジュール]タブをクリックします。
  • 検索バーにHTMLを入力します。 
  • HTMLモジュールをクリックします。 
  • 右上の[無料でモジュールを取得]をクリックします。モジュールのインストールが完了するまでに数分かかる場合があります。
  • モジュールのインストールが完了したら、コンテンツに移動します。

    • ブログ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターで、サイドバーエディターの検索バーに「HTML」と入力します。
  • HTMLモジュールをクリックし、コンテンツ内の位置までそれをドラッグします。
add-html-module-to-page
  • [HTMLモジュール]をクリックして編集します。
  • サイドバーエディターで、Googleマップの埋め込みコードを貼り付けます。

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

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

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

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

add-html-module-to-template

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

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

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.