スマホでブログ更新 Googleマップを埋め込む方法 2019【Chromeブラウザ詳細解説】

  • 2019年8月16日
  • 2020年3月16日
  • ブログ

こんにちは、おじまるです。

僕は空いた時間を利用してiPhoneやiPadでブログを書くことが多いです。

iPhoneやiPadで旅行先やおすすめスポットなどの記事を書く時にGoogleマップの地図をブログに埋め込みたいと思う時が結構あります。

iPhone版Googleマップのアプリだと地図の埋込みができないので、ブラウザを使っています。

iPhoneの標準WebブラウザSafariを利用してGoogleマップを検索してクリックするとGoogleマップが立ち上がってしまいませんか?

これだと結局、地図を埋め込むことができません。

そこで、使うアプリはGoogleの『Chrome』ブラウザです。

Chromeなら、ある手順をすることでブログに地図を埋め込むことができます。

今回はその手順をご紹介します。

それでは、Chromeブラウザでのマップ埋込み方法、いってみましょう!

Chromeを入手する

まずは、iPhoneに『Chrome』Webブラウザがインストールされていない場合は、『App Storer』からダウンロードします。

Chromeを入手する

Chromeを起動してGoogleマップを検索

次にChromeを起動します。

起動したら『Googleマップ』を検索。

Googleマップの検索結果が出たら、Googleマップのサイトをクリックします。

Googleマップのサイトに移動されますが、スマホでGoogleマップを開くとモバイル用サイトが開かれるはずです。

モバイル用サイトでは『埋込み用リンク』は表示されない

Googleマップのモバイル用サイトでは地図の埋込み用リンクが出ないので、『PC版サイト』に変更する必要があります。

下の画像はGoogleマップのモバイル用サイトです。このまま目的の場所を検索して地図の『埋込み用リンク』を見つけようとしても、表示されません。

試しにモバイル用サイトで『東京タワー』を検索して『共有』をクリックしてみます。

『共有』をクリックして出る画面は下の画像のとおりです。

これだと、地図を埋め込むためのリンクが出ないことが分かります。

『モバイル用サイト』から『PC版サイトに変更する』方法

モバイル用サイトから『PC版サイト』に変更する方法を画像を使ってご紹介します。

①画面右下の赤丸で囲んだ『・・・』をクリックします。

②メニュー画面が出たら、メニュー画面を下にスクロールさせる。

③『PC版サイトを見る』をクリックする。

④PC版サイトが表示される。

以上4つの操作でモバイル用サイトから『PC版サイト』に変更できました。

目的地を検索して地図の『埋込み用リンク』をコピーする

地図の埋込み用リンクを表示させるPC版サイトに変更できたら、目的地を検索して地図の埋込み用リンクを表示させ、コピーをすればOKです。

それでは、今回は『東京タワー』を目的地の例にして一連の手順をご紹介します。

①検索窓に目的地を入力して検索する。

②目的地の『共有』をクリックする。

③『地図を埋め込む』をクリックして『埋込みリンク』を表示させる。

④iPhoneの画面を横向きにする。

iPhoneの画面を縦向きのままで操作すると、埋込み用リンクの窓が横長のため操作ができません。

iPhoneの画面を横にすると、横長の表示になるため、埋込み用リンクの操作が容易になります。

iPhoneを横に向けても画面が横向き表示にならない場合は、画面の向きを変えるロックを解除します。

画面ロックの解除方法は、下のコントロールパネルを表示して赤丸のロックを解除します。

ロックを解除すると、下の画像のようになります。

これで、縦画面から横画面にすることが可能になります。

⑤埋込み用リンクを選択してコピーする

埋込み用リンクの上を長押しすることで、URLを選択できるようになるので、全てのURLを選択します。

URLの選択漏れがあるとリンクできないので、全てを選択して下さい。

赤でマーカーした『HTMLをコピー』ボタンはパソコンの場合は使用できますが、iPhoneでは使用できないようです。

埋込み用リンクのURLが全て選択できたら、『コピー』ボタンをクリックしてURLをコピーします。

これで、埋込み用リンクのコピーができました。

埋込み用リンクをワードプレスの記事に貼り付ける

コピーした埋込み用リンクのURLをワードプレスの記事に貼り付ける場合は『ビジュアルモード』から『HTMLモードに切り替え』をして記事内に貼り付けます。

試しにこの記事内に貼り付けてみました。

HTMLモードの画面に入力した画像が下のものです。

埋め込んだ地図は下のように表示されます。

まとめ

今回はiPhoneを使ってブログを書く時の、Googleマップ埋め込み方法をご紹介しました。

今までスマホでは上手くGoogleマップを埋め込むことができなかった、という方には参考になったでしょうか?

Googleマップを埋め込むと、その場所のクチコミも表示されるので、記事を読む方の参考になりやすいと思います。

僕はまだまだ記事の書き方が下手ですが、今後も読む方のために良い記事を書いていきたいと思っています。

今回も最後まで読んで頂き、ありがとうございました!

スポンサーリンク
最新情報をチェックしよう!