スマホサイトに地図を表示させる方法

スマホサイトに、地図を表示させる方法をお伝えします。

特に、店舗（お店）を運営している人は、スマホサイトに地図を表示させておくようにしましょう。 その地図を見ながら、お店に来てくれる人もいるので、地図の表示は必須になりますよ！

スマホサイトに地図を表示する方法は、
パソコンサイトに地図を表示する方法と一緒

スマホは、「小型パソコン」であるため、スマホサイトに地図を表示する方法と、パソコンサイトに地図を表示する方法は、一緒です。

同じ手順で、地図を表示することができるので、下記のページを見てみてください。

・グーグルマップ（地図）をホームページ上に表示する方法


上記のページの手順どおりにやれば、スマホサイトに地図を表示することができます。

ただ、１点だけ、注意点がある

スマホサイトに地図を表示することは、とても簡単なのですが、１点だけ、注意点があります。 それは、「横幅（width）の設定」です。


スマホというのは、機種によって画面サイズが異なります。

そのため、スマホサイトに表示する地図は、どのスマホの画面サイズでも、キレイに表示されるように工夫をしてあげる必要があるということです。


具体的には、Google map の横幅は、デフォルトでは、具体的な数字（width="600"）で指定されているのですが、 スマホサイトに貼り付ける場合は、下記のように、width の設定は、パーセンテージ（width="100%"）に変更するようにしてください。

上記のように、Google map のソースに書かれている「横幅（width）の設定」を、パーセンテージで指定することで、どの画面サイズのスマホでも、地図がキレイに表示されるようになります。


スマホサイトに地図を表示するときは、ここがポイントになるので、width の設定を、パーセンテージに変更することだけ、忘れないようにしてくださいね！

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　AIやChatGPTを活用してビジネスを行う講座はこちら