ライフハック PR

【スマホAndroid対応】誰でもできる!Googleマップをブログに埋め込む方法

記事内に商品プロモーションを含む場合があります

ブログをやっている方なら、誰しもがやろうとしたことがある、ブログにGoogleマップを埋め込む作業。もちろん私もよくやってます。

ただ、スマホ(Android)でやろうとすると、一工夫がいるのではじめの内はよくわかりませんでした。

Chromeで、PC版サイトとして見れば、パソコンと同じようにHTMLコードを出すことができます。

スマホの普及が進んで、スマホでブログを書いている方も多くなってきているかと思いますので、ここで、やり方を紹介したいと思います!

ここのやり方を見れば誰でもできます。是非参考にしてください。

ここでは、スマホはiPhoneではなく、Androidの端末を対象にしています。

なお、自分のスマホがiPhoneかAndroidかわからないという人は、以下の手順で確認してください。

以下の画像のような表示にならないという場合は、逆に、iPhoneである可能性が高いです。

Googleマップ 埋め込み設定ボタンを押す
スマホ端末確認下の方にある端末情報をチェックする

目次

1.まずは設定を確認しよう

私は、Androidスマホでも、PC版サイトとして見ればよいのはわかっていたのですが、なぜかできませんでした。共有ボタンを押してもラインとかへの共有しか出なかったのです。なぜ。。。と思いながら数日格闘しました。

そして、ようやく気づいたのですが、できなかった理由が「Googleマップのアプリの設定が悪かったから」でした。

ChromeでGoogleマップを開こうとしても、アプリが起動してしまっていたため、ブログに埋め込む用のHTMLコードが出ませんでした。

なぜなら、ChromeでGoogleマップを開くときには、必ずGoogleマップのアプリを開く設定にしてしまっていたからです。

それを解除してあげれば、Androidでもブログに埋め込む用のデータを手に入れることができます。

以下の手順で操作していけば、Googleマップを開く際に、アプリで開くか、そのままChromeで開くかの選択肢が出るようになります。

Googleマップ 埋め込み設定ボタンを押す
Googleマップ埋め込み アプリ設定アプリを押す
Googleマップ埋め込み アプリ設定Googleマップを選ぶ
Googleマップ埋め込み アプリ設定「規定で開く」を選ぶ
Googleマップ埋め込み アプリ設定「対応リンクを開く」を選ぶ
Googleマップ埋め込み アプリ設定「その都度確認」を選ぶ

これでChromeでGoogleマップを開くときに、そのままChromeで開くか、Googleマップアプリで開くかを選べるようになります。

これで、Googleマップをブログに埋め込む下準備は完了です。

2.ChromeからGoogleマップを開く

Chromeを起動して、PC版サイトにチェックを入れてからGoogleマップを開くと、パソコンでやった場合と同じ画面になります。いかに詳しく手順をのせています。

Googleマップ埋め込みChromeを開く
Googleマップ埋め込み場所を検索して、右上の3つの点を選ぶ
Googleマップ埋め込みPC版サイトを選ぶ
Googleマップ埋め込みこのように、チェックが入ります
Googleマップ埋め込み地図を選ぶと、このような表示になるので、Chromeで開くを選ぶ
Googleマップ埋め込み共有ボタンを押す
Googleマップ埋め込み「地図を埋め込む」を選び、HTMLをコピーする

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

3.ブログに埋め込んで完成!

ワードプレスの場合をここでは紹介します。

Googleマップ埋め込み ワードプレステキストを選ぶ
Googleマップ埋め込み ワードプレスコピーしたものを貼り付ける
Googleマップ埋め込み ワードプレスブログに貼り付けられた!

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です