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

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

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

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

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

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

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

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

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

• サイズをカスタマイズしたら、[HTML をコピー] をクリックします。

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

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