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

Googleマップをページに追加する

更新日時 2019年 10月 1日

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

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

注: すでに Google マップモジュールに埋め込まれたマップがある場合は、まず HTML モジュールの古いモジュールを交換する必要があります。Google の API が変更されたため、このモジュールのサポートは終了します。

HTML モジュールの既存のマップモジュールを交換するには、次の手順を実行します。

  • マーケットプレイスから HTML モジュールをダウンロード します。
  • HubSpot アカウントで、ランディングページまたはウェブサイトページに移動します。 
  • ページにカーソルを置いて、[編集] をクリックします。
  • [設定]  タブをクリックして、[詳細オプション] を選択します。 
  • [テンプレート] セクションで、サムネイルにカーソルを置き、[テンプレートを編集] をクリックします。
  • 既存の マップモジュールをクリックして、モジュールエディターを開きます。 
  • 右側のモジュールエディターで、[モジュール名] ドロップダウンメニューをクリックし、[HTML モジュール] を選択します。existing%20map%20
  • [変更を公開] をクリックします

テンプレートに HTML モジュールを追加する必要がある場合:

  • HubSpot アカウントで、ウェブサイトページまたはランディングページに移動します。
  • ページにカーソルを置いて、[編集] をクリックします。
  • [設定] タブをクリックして、[詳細オプション] を選択します。
  • [テンプレート] セクションで、サムネイルにカーソルを置き、[テンプレートを編集] をクリックします。
  • テンプレートエディターで、右側のサイドバーの [+追加]をクリックします
  • 検索バーを使用してHTMLモジュールを検索します。モジュールをテンプレートの場所にドラッグ&ドロップします。
  • [変更を公開] をクリックします。add%20the%20html

テンプレートに HTML モジュールが追加されたら、ページにマップを追加できます。  

  •  Google マップに移動します。
  • 検索バーを使用してアドレスを検索します。 
  •  [共有] をクリックし、 [マップを埋め込む] を選択します。  

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

  • サイズをカスタマイズしたら、[HTML をコピー] をクリックします。copy-html
  • HubSpot で、ウェブサイトページまたはランディングページに移動します。
  • ランディングページにマウスを置いて、[編集] をクリックします。
  • 左側のサイドバーで [モジュールを編集] をクリックします。
  • HTMLモジュールを選択します。Google マップからコピーした HTML コードを [HTML] フィールドに貼り付けて、[保存] をクリックしてモジュールリストに移動します

paste-the-html-code

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