★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【あなたのお手伝い】
 

google map の埋め込みとカスタマイズ

 
トップページ はじめに 講座の効果 作成実績 受講者の声 パーツテンプレート ホームぺージ講座 スマホサイト講座 よく使う用語集
 
 
プロフィール商品一覧特典画像お手伝い
 

google map の埋め込みとカスタマイズ

 
トップページ 基礎知識 ホームページソフト スマホサイト講座 AI活用法 レンタルサーバ 用語集 HTMLタグ CSS入門 テクニック集
 
 
  トップページ > ホームページ作成で使えるテクニック
 

グーグルマップ(地図)をホームページに埋め込む方法

グーグルマップ(地図)をホームページ上に表示する方法をお伝えします。

店舗のあるお店は、ホームページに地図を表示させておいた方が良いですよね。
分かりやすい地図があると、お店に行きやすくなるためです。
グーグルマップ(地図)をホームページに表示するのは、もはや当たり前というレベルになってきました。他の地図を使うよりも、グーグルマップ(地図)の方が高性能ですし、無料で使うことができます。地図の掲載は、お客さんにとって分かりやすくなるので、地図はぜひ掲載するようにしましょう!


なお、表示する地図については、高性能な地図を無料で使える「Google マップ」を使った方が良いです。

ここでは、その「Google マップ」をホームページに表示する方法をお伝えします!




Google マップ(地図)をホームページ上に表示する手順

 
手順1:下記、Google マップのサイトにアクセスする。

https://www.google.com/maps



手順2:地図に表示したい住所(お店の場所など)を検索する。



なお、ここでは例として、「東京スカイツリー」の場所を、地図で表示してみたいと思います。



手順3:左側にある、「共有」のボタンをクリックする。




手順4:「地図を埋め込む」のタブをクリックして、表示されている
ソースをコピーして、ホームページに貼り付ける。




ソースが表示されているので、そのソースをコピーして、ホームページ上に貼り付けましょう。 なお、貼り付ける場所は、「地図を表示させたい箇所」に貼り付けるようにしてください。



手順5:ホームページ上に、地図が表示されることを確認する。

下記のように、ホームページ上に地図が表示されたら、作業は完了です。






ちょっとしたカスタマイズ方法

 

表示される地図の「横幅」と「縦幅」を変更したい場合は、ソースの中の記述で、width(横幅)と height(横幅)の数字を変更することで、動画の大きさを変えることができます。

たとえば、「width="300"」と「height="300"」にすれば、下記のように、横幅と縦幅が300の地図が表示されるという形ですね。



表示するホームページの横幅に合わせて、width の設定を調整してみてください。



地図は表示させよう!

 

グーグルマップ(地図)は、店舗がある お店の場合は、やはり、表示させておいた方が良いと思います。 地図があった方が、訪問者は分かりやすいからですからね。

地図があると、実際にそのお店に行く人も増えるので、地図はぜひ表示させておくようにしましょう。

もちろん、他の人にホームページを作って提供する、「ホームページ作成サービス」を行うときも、「地図を表示させておきましょうか?」と伝えると、「ぜひお願いします」となりますよ!



やり方が分からない場合は?

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。


「こういうことを実現したい!」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。





【よく読まれている関連記事】


【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

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

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



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒ オフィスで働いている女性が笑顔で人差し指を立てている画像について



AIやChatGPTを使ってインターネットビジネスを行う講座

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

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



 
^