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というタグでメールに読み込んでいるのですが、タグに対応していないメーラーがほとんどで、受信時に削除されてしまうからです。