ブログをやっている方なら、誰しもがやろうとしたことがある、ブログにGoogleマップを埋め込む作業。もちろん私もよくやってます。
ただ、スマホ(Android)でやろうとすると、一工夫がいるのではじめの内はよくわかりませんでした。
Chromeで、PC版サイトとして見れば、パソコンと同じようにHTMLコードを出すことができます。
スマホの普及が進んで、スマホでブログを書いている方も多くなってきているかと思いますので、ここで、やり方を紹介したいと思います!
ここのやり方を見れば誰でもできます。是非参考にしてください。
ここでは、スマホはiPhoneではなく、Androidの端末を対象にしています。
なお、自分のスマホがiPhoneかAndroidかわからないという人は、以下の手順で確認してください。
以下の画像のような表示にならないという場合は、逆に、iPhoneである可能性が高いです。


目次
1.まずは設定を確認しよう
私は、Androidスマホでも、PC版サイトとして見ればよいのはわかっていたのですが、なぜかできませんでした。共有ボタンを押してもラインとかへの共有しか出なかったのです。なぜ。。。と思いながら数日格闘しました。
そして、ようやく気づいたのですが、できなかった理由が「Googleマップのアプリの設定が悪かったから」でした。
ChromeでGoogleマップを開こうとしても、アプリが起動してしまっていたため、ブログに埋め込む用のHTMLコードが出ませんでした。
なぜなら、ChromeでGoogleマップを開くときには、必ずGoogleマップのアプリを開く設定にしてしまっていたからです。
それを解除してあげれば、Androidでもブログに埋め込む用のデータを手に入れることができます。
以下の手順で操作していけば、Googleマップを開く際に、アプリで開くか、そのままChromeで開くかの選択肢が出るようになります。






これでChromeでGoogleマップを開くときに、そのままChromeで開くか、Googleマップアプリで開くかを選べるようになります。
これで、Googleマップをブログに埋め込む下準備は完了です。
2.ChromeからGoogleマップを開く
Chromeを起動して、PC版サイトにチェックを入れてからGoogleマップを開くと、パソコンでやった場合と同じ画面になります。いかに詳しく手順をのせています。







これで、埋め込むGoogleマップのHTMLコードが入手できます。あとは、これをブログに貼り付けるだけです。ここでは、ワードプレスの場合を書いていますので参考にしてください。
3.ブログに埋め込んで完成!
ワードプレスの場合をここでは紹介します。



スマホ(Android)でブログにGoogleマップを埋め込む方法を紹介しました。ここの方法を参考にすれば、誰でもできると思います。みなさんも挑戦してみてください。