企業や飲食店、美容室などのサイトを構築する際に必ずと言っていいほど作成するページに「アクセス」があると思います。
その際にgoogleMAPで表示されるとわかりやすいですよね!
特に今はスマホをみんなが持ってる時代なのでそのような使い方の需要が多いと思います。

ただ!この時にgoogleMAPがスマホから見るとちゃんと表示されなかったりすることがあります。
今回はgoogleMAPをスマホから見た時にも見栄えよくブログやHPに埋め込む方法を書いていきます。

まずはgoogleMAPの埋め込みコードの取得ですがここまでは簡単なので軽く説明だけで。

Googleマップ を開く

②左上のフィールドに住所を入力して検索

※もし住所登録がされてなくて検索表示されない場合はまずは登録を

③共有⇒地図を埋め込むを選択

④表示されたソースコードをコピーする

ここからが重要!

まずコピーしたものを自分のサイトに貼り付け。
埋め込みソースコードを見て「width=”◯◯◯”」の「◯◯◯」の数値を「100%」に変更する。
これでPCとかスマホとかどの媒体から見ても画面の横幅いっぱいに表示してくれます!

※ あとはスマホから見た時に縦長過ぎてスクロールの邪魔にならないように
「height=”◯◯◯”」の「◯◯◯」の数値を「300〜400」くらいに設定しておけばちょうどいいくらいだと思います。