スマホからブログに地図を埋め込む方法 - ハイエース4人家族で車中泊〜ナローボディでも快適なバンライフを〜

ナローボディのハイエースをいろいろ工夫して、家族4人で車中泊やバンライフを楽しんでいます。

今日はブログに地図の埋め込みをスマートフォンから貼り付ける方法について書いてみます。

案外厄介なスマホからの地図埋め込み

私はブログのほとんどをiPhoneで書いています。
大半はスマホのはてなブログ用のアプリから書きますが、時々、必要に応じてsafariからデスクトップ画面でブログを開いて作業する場合があり、その2通りを使い分けています。

ヘッダーやフッターの編集とか、文中の見出しタイトルを設定する作業、過去記事の貼り付けなど、PC版でないとできない作業があるので、そういう時だけスマホからデスクトップ画面を開いて作業するわけです。

画面が小さいので少し作業しづらいですが、慣れれば大したことではありません。

さて、今日の本題はスマホからの地図の埋め込みです。
地図の埋め込みとは、おすすめの場所などをブログに埋め込む方法のことですね。
（たとえばうちの家族が大好きな浜松のかさご餃子の地図はこちらになります）

ブログ上ではこんな風に地図が表示されていますが、実際の編集画面では12行くらいの長ったらしいhtmlの文字列になっています。この長い構文をGoogleマップから取得して、ブログの編集画面に貼り付けると、こんな風に地図が表示されるわけです。

作業としては簡単なことなんですが、Googleマップから地図用のhtmlを取得するまでが少し厄介なんです。
何が厄介かというとGoogleマップの仕様が厄介というか何というか。

スマホのGoogleマップのアプリからだと、地図埋め込み用のhtmlが取得できないんですね。SafariなどのブラウザーでGoogleマップを検索して開いても、勝手にアプリの方が開いてしまうんです。
アプリ版のGoogleマップでは地図の埋め込みに必要なhtmlが表示されない仕様になっているようです。

なので、スマホから地図埋め込み用のhtmlを取得するには、デスクトップ版のGoogleマップを開いて、そこから目的地を探す必要があります。

地図埋め込みまでの具体的な流れ

さて、それでは実際にスマホからGoogleマップの地図を埋め込むまでの流れを見ていきましょう。

《Safariの場合》
1.Safariを開く
2.上の窓、左端のAAのところをクリックして、「デスクトップ用webサイトを表示」をクリックする。

3.デスクトップ版Safariが開いたら、Googleマップを検索する。

4.Googleマップが上位に2つヒットするので、URLを見て「.......google.co.jp」の方をクリックする。

5.デスクトップ版Googleマップが開くので、表示させたい場所を検索窓に入力する。

6.場所が表示されたら、概要欄の右端にある「共有」マークをクリックする。

7.「地図を埋め込む」のタブをクリックする。

8.表示されたhtmlをタップして青く反転させ、「コピー」をクリックする。

9.ブログの編集画面に貼り付ける。

以上の流れで地図の貼りつけができます。

よくやってしまう間違いとして、Safariの検索画面でいきなり目的地を入力してしまいがちですが、まず最初にやることは、検索画面からGoogleマップを開くことです。その時にAAから「デスクトップ用ウェブサイト」に切り替える、というところが大事なポイントです。

ついでにGoogle Chromeでの貼りつけ方も書いておきましょう。不思議なことに、Google Chromeで同じように地図埋め込みをする場合、上の4のところで「.......google.co.jp」をクリックする。だったのが、「.......google.com」の方をクリックするに変わります。Chromeの方で「....co.jp」をクリックするとなぜかアプリが開いてしまうんですね。

Googleマップの仕様はよく分かりません。

《Chromeの場合》
1.Chromeを開いて、Googleマップを検索する。画面右下の「・・・」をクリックする。