ブログをやっている方なら、誰しもがやろうとしたことがある、ブログにGoogleマップを埋め込む作業。もちろん私もよくやってます。
ただ、スマホ(Android)でやろうとすると、一工夫がいるのではじめの内はよくわかりませんでした。
Chromeで、PC版サイトとして見れば、パソコンと同じようにHTMLコードを出すことができます。
スマホの普及が進んで、スマホでブログを書いている方も多くなってきているかと思いますので、ここで、やり方を紹介したいと思います！
ここのやり方を見れば誰でもできます。是非参考にしてください。
ここでは、スマホはiPhoneではなく、Androidの端末を対象にしています。
なお、自分のスマホがiPhoneかAndroidかわからないという人は、以下の手順で確認してください。
以下の画像のような表示にならないという場合は、逆に、iPhoneである可能性が高いです。
設定ボタンを押す
下の方にある端末情報をチェックする目次
1.まずは設定を確認しよう
私は、Androidスマホでも、PC版サイトとして見ればよいのはわかっていたのですが、なぜかできませんでした。共有ボタンを押してもラインとかへの共有しか出なかったのです。なぜ。。。と思いながら数日格闘しました。
そして、ようやく気づいたのですが、できなかった理由が「Googleマップのアプリの設定が悪かったから」でした。
ChromeでGoogleマップを開こうとしても、アプリが起動してしまっていたため、ブログに埋め込む用のHTMLコードが出ませんでした。
なぜなら、ChromeでGoogleマップを開くときには、必ずGoogleマップのアプリを開く設定にしてしまっていたからです。
それを解除してあげれば、Androidでもブログに埋め込む用のデータを手に入れることができます。
以下の手順で操作していけば、Googleマップを開く際に、アプリで開くか、そのままChromeで開くかの選択肢が出るようになります。
設定ボタンを押す
アプリを押す
Googleマップを選ぶ
「規定で開く」を選ぶ
「対応リンクを開く」を選ぶ
「その都度確認」を選ぶこれでChromeでGoogleマップを開くときに、そのままChromeで開くか、Googleマップアプリで開くかを選べるようになります。
これで、Googleマップをブログに埋め込む下準備は完了です。
2.ChromeからGoogleマップを開く
Chromeを起動して、PC版サイトにチェックを入れてからGoogleマップを開くと、パソコンでやった場合と同じ画面になります。いかに詳しく手順をのせています。
Chromeを開く
場所を検索して、右上の3つの点を選ぶ
PC版サイトを選ぶ
このように、チェックが入ります
地図を選ぶと、このような表示になるので、Chromeで開くを選ぶ
共有ボタンを押す
「地図を埋め込む」を選び、HTMLをコピーするこれで、埋め込むGoogleマップのHTMLコードが入手できます。あとは、これをブログに貼り付けるだけです。ここでは、ワードプレスの場合を書いていますので参考にしてください。
3.ブログに埋め込んで完成！
ワードプレスの場合をここでは紹介します。
テキストを選ぶ
コピーしたものを貼り付ける
ブログに貼り付けられた！スマホ(Android)でブログにGoogleマップを埋め込む方法を紹介しました。ここの方法を参考にすれば、誰でもできると思います。みなさんも挑戦してみてください。