スマホでグーグルマップをブログに埋め込む方法

こんにちは、SUHAMAです。

私はブログを書く時なんでもスマホから記事を書いたり編集してしまうのですが、この前グルメ記事を書いた時にグーグルのマップを埋め込もうとしたんですけど、これがなかなか上手くいかない。

別にパソコンからやればいいじゃんって思うかもしれないですが、スマホから書くメリットって出先で手軽に書けるのがいいところなんで

なんとなく完結したいし、やっているうちに出来ないことにだんだん苛立ったりしてきて(汗)調べに調べてやっとできたのでその方法を今回はご紹介します。

まぁあんまり需要はないと思うんですけど、スマホからグーグルのマップを埋め込みたいとか考えている人の役に立ったら嬉しいです。

スマホから埋め込みが出来ない原因

結論からいうとスマホからグーグルマップの埋め込みが出来ない原因は、グーグルマップのアプリ版にそもそも埋め込み機能がついてないということ。

例えば、目的の場所をSafariのブラウザで検索してたとして、それを開いた時に大体のスマホはグーグルマップが入っていると思うのですが、それをクリックしたりすると強制的にアプリで開いてしまいます。

こんな感じ↓

例えばスカイツリーの場所を検索してマップや地図をタップすると

  

グーグルマップのアプリに移行してしまい

アプリの方では埋め込み機能がない

その為グーグルマップをアプリで開かずにブラウザでグーグルマップを開く必要があります。

しかし、これがSafariからだと難しい。

いろいろ試行錯誤したんですがダメでした。

ではどうするかというと

Chromeを使って埋め込む

スマホのグーグルアプリからは埋め込みの機能がないので、どうするかというと、Safariを使うのではなくChromeを使います。

Chromeを使う理由はPC版の機能を使うことができること。パソコンではすんなり出来るということは単純に考えればそれと同じ機能を使えれば埋め込みことができるということになります。

※無い方はChromeアプリをダウンロードしてください。

埋め込み手順

まずChromeアプリを開き

グーグルマップを検索

右下の「・・・」をタップ

PC版サイトを見る

ここが大事です↓

Chromeを使うことでグーグルマップのアプリを開かずとも、PC版と同じグーグルマップの動作を行うことができます。

するとこのような画面が出るのでグーグルマップをタップ

 

左上の「三」ハンバーガーマークをタップしてもう一回タップ

するとグーグルマップアプリの方では出てこない、PC版の項目がでてくるので、地図を共有または埋め込むをタップ

次の画面で地図を埋め込むを選ぶとHTMLの羅列が出てくるのでこれを、端から端までコピーします。

パソコン版をスマホで無理矢理みている状態なので大部分はスマホの画面で切れてしまっています。

ここをしっかり端から端までコピーしないと当然ながら反映されませんので注意してください。

そしてコピーしたものをHTML貼り付けて完了です。

まとめ

グーグルマップをスマホで貼り付けるには

・Safariからだと上手くいかないので、Chromeを使う

・「PC版を見る」でパソコンと同じ設定にし、そこから埋め込み機能を使う

あまり需要はないと思いますが、覚えておいて損は無いと思います。

スマホからグーグルマップを貼り付けたいと考えている方の参考になれば嬉しいです。