JimdoのホームページにGoogleマップを埋め込む(応用編)
この記事では、Jimdoの機能「コンテンツ追加-Googleマップ」を使用せずに、JimdoホームページにGoogleマップを埋め込みます。
Jimdoの機能「コンテンツ追加-Googleマップ」を使って簡単にGoogleマップを埋め込む方法はこちらの基本編でどうぞ。95%は基本編の簡単な方法で解決します。
Googleマップの機能「共有-地図を埋め込む」でオリジナルの地図を作成して、Jimdoの「ウィジェット/HTML」にコードを埋め込む方法です。
Googleマップのサイト上で「地図を埋め込む」ためのiframeタグを提供しています。Jimdoの「ウィジェット/HTML」を使用して、Googleマップのiframeのコードを記入するとグーグルマップを埋め込むことができます。
技術用語で説明しようとすると僕の頭が混乱するので、さっそく画面を確認しながら説明します。
Googleマップのサイト上でiframeタグを取得する方法
①グーグルマップのサイトを表示
Googleマップのサイトで埋め込むコードを取得します。ブラウザでGoogleマップのサイトを開いてください。
下記のように検索エンジンで「グーグルマップ」を検索してもOKです。
▼
▼
▼
②店舗所在地の住所(または施設名)を入力・検索して地図を表示します。
マップ左上の検索窓に入力して、検索ボタン(虫眼鏡)をクリック。
※ここでは例として「箕面駅」を検索します。
▼
▼
③「共有」をクリック
左側に表示される概要欄の中央、まるいアイコンが5つあります。一番右端が「共有」です。押してください。
▼
④共有窓の右側、「地図を埋め込む」をクリック
共有
リンクを送信する | 地図を埋め込む
が表示されます。右側の「地図を埋め込む」をクリックします。
▼
⑤Jimdoに埋め込むコードが表示されます。
「HTMLをコピー」してください。地図のHTMLを取得できます。
取得したコードがこちらです。<iframe から始まり </iframe>で終わっていることを確認してください。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3274.8652092442167!2d135.4662303151035!3d34.83448138354935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000fa161f3d6eaf%3A0xf241b6ddef9b75b4!2z566V6Z2i6aeF!5e0!3m2!1sja!2sjp!4v1611824145224!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
▼
⑥Googleマップを貼り付ける場所に「コンテンツ追加-その他コンテンツ-ウィジェット/HTML」を挿入します。
▼
⑦Googleマップのサイトで取得したHTMLのコードを貼り付けます。
▼
<iframe から始まり、
▼
</iframe>で終わっていれば、間違いなく貼付けできています。
最後に右下の「保存」ボタンを押してください。
うまくGoogleマップを埋め込むことが出来ました!
・・・あれ?
なんだかバランスが悪くないですか?左によりすぎているような・・・。
Jimdoの「コンテンツ追加-Googleマップ」と比較するとこんな感じです。
上:GoogleマップのサイトでHTMLを取得→Jimdoの「ウィジェット/HTML」で埋め込んだGoogleマップ
下:Jimdoの機能で「コンテンツ追加」から埋め込みした「Googleマップ」
上から、
地図サイズ=小、地図サイズ=中、地図サイズ=大、
でiframeタグを取得して「ウィジェット/HTML」で埋め込んだ地図、
いちばん下は、Jimdoの「Googleマップ」機能で埋め込んだ地図です。
Jimdoの「コンテンツ追加-Googleマップ」では自動的に全幅100%に調整されて表示されるのに対して、Googleマップからコードを取得すると、以下のような固定幅になってしまいます。
カスタムサイズを選択すると自由に設定できます。横幅1,000×縦450でJimdoの「Googleマップ」と同じくらいに表示されます。しかし、あくまで固定幅なのでパソコンで見るとOKでもスマホで見ると自動的に調整されず、今度は地図が端末画面の右側にはみ出してしまいます。
横1,000px ・縦450pxで取得した場合です。パソコンではきれいに表示されていますが、、、
スマホで見ると、、、箕面駅がない、、、
横幅1,000pxで指定すると地図が端末画面におさまらず、中心にあるべき箕面駅が端末画面内に表示されなくなってしまいました。
こちらは、Jimdoの「Googleマップ」で埋め込んだマップです。まんなかに箕面駅が表示されます。自動的にスマホビューに対応しています。レスポンシブな感じです。
iframeでGoogleマップを埋め込んだときには、<iframe>タグを全幅にする必要があります
さらにCSSを追加しないといけないです。
以下、HACK NOTE さんに書かれているコードを引用させていただきます。
HTML
「ウィジェット/HTML」に貼り付けたiframeタグ(<iframe>から始まり、</iframe>で終わる)の最初と最後に <div class="google-maps"> と </div> を追記して、iframeタグをはさんでやります。
CSS
Jimdoの管理メニューから「基本機能-ヘッダー編集」を開いて、下記のコードを追加します。
いかがでしょうか。スマホでもちゃんと全幅で地図が表示されるようになったでしょうか?スマホでも箕面駅は地図の中心にあるでしょうか笑。
ぼくの経験上、Jimdo「Googleマップ」機能でうまく地図が表示されなかった事例
Jimdoの「Googleマップ」で地図を埋め込めばとても簡単です。わざわざiframeタグを取得してヘッダー編集までするのは手間がかかります。なぜ、この方法が必要なのかを補足します。
ごくたまに思い通りに表示されないケース(1割以下)があります。(本当はできるのに単にぼくの知識不足かもしれません。その場合はコメント欄でご指摘いただけるいと幸いです)
僕が経験したJimdo「Googleマップ」機能の不具合事例①:
マンションサロンのホームページでマンションの所在地を記入して検索すると、Googleマップの左上に、マンションの1階にある飲食店の名前が表示されてしまう。(この飲食店はGoogleビジネスに登録されており、建物全体を飲食店として認識して表示されてしまうみたい)
僕が経験したJimdo「Googleマップ」機能の不具合事例②:
奈良県の郡山駅を表示させたはずなのに、お客さんのスマホで確認すると福島県の郡山駅が表示される。別の端末から見るとまた奈良県の郡山駅が表示される。原因不明。
僕が経験したJimdo「Googleマップ」機能の不具合事例③:
Jimdoの「コンテンツ追加-Googleマップ」で記入していた「所在地」が、完成後になぜかクリアされてしまい、元のデフォルトの世界地図(※下の画像参照)が表示されるようになった。
(この地図では店舗にたどりつけない・・・)
クライアントさんは「ブログページのみ書いていて、Googleマップの所在地欄は変更していないよ。なにも悪さしてないよ。」と主張しているので、それを信じるならJimdoかGoogleマップの不具合です。はい、信じるしかないです。不具合であれば無償で即対応です。
これが一度や二度であれば、内心(いや~、さわったでしょ。苦笑。)と思うのですが、クリアされてしまったことが一度や二度ではないので、なにかの不具合があるだろうなあ、、、と思っています。(同様の経験があれば教えてください)
Jimdo側の「Googleマップ」機能で解決できないとき
上記の事例②、事例③については、「所在地」欄に記入する内容を工夫して解決しました。が、①についてはどうしてもうまく解決できなかったので、すこしだけ手間ですが、GoogleマップのサイトでiframeタグをもらってきてJimdoの「ウィジェット/HTML」機能で埋め込みしました。
Jimdo側で提供される「Googleマップ」埋め込み機能では、このような想定外のエラー(不具合というほどでもないし、単なるミスや知識不足なのかもしれない)がときどき生じるので、頻繁に店舗を作っていてGoogleマップを追加する機会が多い方(多店舗展開?)は知っておくと便利です。
+ + + + + おすすめのJimdo本 + + + + +
いちばんやさしいJimdoの教本 人気講師が教える本格ホームページの作り方 「いちばんやさしい教本」
ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座)
以下の6冊は、いずれもJimdoに精通した先生方の書籍です。どれも分かりやすく初心者向けに書かれています。順不同です。肌にあうものを選択してマスターしてください。
今すぐ使えるかんたん ジンドゥー Jimdo 無料で作るホームページ[改訂5版]
10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版
小さなお店&会社のホームページ Jimdo入門
見た目にこだわる Jimdo入門 Kindle版
はじめてのホームページらくらく作成ガイド〈改訂版〉: 15分×7日間 無料でできる
今すぐ使えるかんたん ぜったいデキます! ホームページ作成 超入門
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?