ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

カミハヤMA
2022.08.17

LPにGoogleMapを挿入する方法

本記事では、ランディングページ(以下LP)にGoogleMapを挿入する方法について説明します。

 

目次
 
 1.はじめに
 2.LPにGoogleMapを挿入する方法
 3.最後に 

1.はじめに

イベント開催案内、セミナー開催案内のLPを作成する際、開催場所が分かりやすいようにGoogleMapを用いたい場合、カミハヤMAのLPにGoogleMapを挿入する方法についてご紹介します。

2.LPにGoogleMapを挿入する方法

まず最初にGoogleMap地図情報の取得をする必要があります。
手順は、次のようになります。
①https://www.google.co.jp/mapsのページへアクセスします。
②画面左上にある「Googleマップを検索する」のフィールドに地図を表示させたい住所を入力して検索します。
③検索結果として表示されるモーダル表示の中にある「共有」をクリックします。
④地図を埋め込むをクリックします。
⑤埋め込みコードが表示されるので、iframeから始まる内容をすべてコピーします。

【GoogleMap地図情報取得画面】
 

GoogleMapの地図情報の取得を終えたら次は、カミハヤMAのLP側の操作を行います。
その手順は、次のようになります。
①左フレームの「コンポーネント」メニューの中にある「ランディングページ」をクリックします。
②タイトルやエイリアスなど必要情報の入力を終えたらLPのテーマから採用するテーマのSelectボタンをクリックします。
③画面右上にある「ビルダー」ボタンをクリックします。
④GoogleMapを表示させたい場所へ「HTML」スロットを挿入します。
⑤「HTML」スロットのCONTENT PROPERTIESのフィールドへGoogleMapから取得したiframeタグをペーストします。
⑥画面右上にある「Close Builder」ボタンをクリックします。
⑦画面右上にある「保存して閉じる」ボタンをクリックします。

以上で、カミハヤMAのLPへGoogleMapを表示させることができました。

【LPビルダーへHTMLスロットによるGoogleMap挿入画面】
 

3.最後に

いかがでしたでしょうか。とても簡単にカミハヤMAのLPにGoogleMapを設定できることをご理解いただけたのではないでしょうか。
おそらく読者の方の中には、メール本文にもGoogleMapを設定されたい気持ちもお持ちかもしれませんね。しかし残念ながらそれはできません。
カミハヤMAのメールビルダーHTMLスロットでは、プレビューで表示でGoogleMapの地図が表示されますが、メール送信先のメーラーからGoogleMapを表示させることは残念ながらできません。
理由は、HTMLのiframeというタグでメールに読み込んでいるのですが、タグに対応していないメーラーがほとんどで、受信時に削除されてしまうからです。
 

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問