注目キーワード
  1. 設定
  2. 設置
  3. デザイン

グーグルマップ(Google Map)を埋め込む方法

あなたのホームページやブログなどで特定の場所を紹介する内容の記事を書いた場合、
ページ内にGoogle Map(グーグルマップ)の地図を埋め込んでおけば訪問者に対して正確な場所を伝えることができ、よりリアルに足を運べるイメージをさせることができるようになります。

 

逆にお店や旅行の観光案内を調べたくてあなたのサイトに辿り着いた訪問者が、ページの中を見ても場所がわかりにくい、わからないと「まあいいや」と離脱する可能性すら起こりかねません。
そういう印象を持たれるとリピーターになる可能性も低くなります。

そういうこともあって、特定の場所に関する紹介ページに関しては、できる限りマップを埋め込んで表示させることを推奨いたします。

 

 

次項からはサイト内のページにグーグルマップの地図の埋め込み方を説明させていただきます。
やり方はとても簡単で短時間でできますのでご安心してください。

 

なおグーグルマップの利用は一部の条件で有料になることもありますが、今回ご紹介する操作内容につきましては無料でできます。(2020年8月現在)

 

ページ内にGoogle Map(グーグルマップ)の地図を埋め込む方法

まず始めにグーグルマップのページを開きます。

 

グーグルマップの埋め込み方 続いて左上の空欄に任意の場所を入力して検索を実行します。

入力した場所の地図が表示されたら中央右にある「共有」をクリックします。

 

グーグルマップの埋め込み方法共有」では「地図を埋め込む」のタブを選択します。

次にそのすぐ下の左端をクリックして表示させたい地図のサイズ(小・中・大・カスタムサイズ)を選択します。

サイズを決めたら最後に右側の「HTMLをコピー」をクリックするとクリップボートにコピーしましたと下に表示されます。

 

あとはご自身のページ内の任意の場所に上記コードを張り付ければグーグルマップが埋め込まれます。

 


<小:幅400×高さ300>

 


<中:幅600×高さ450>

 


<大:幅800×高さ600>(本ブログのPCでの記事幅は758なのではみ出します。)

 


<カスタムサイズ>任意の数字を入力してお好みのサイズで表示できます。

 

なおどのサイズを選択して貼り付けてもコード内のwidth(幅)と height(高さ)の数字を変更すれば好きなサイズに調整することができます。

 

※注意!
横幅(width)を数値指定した場合、PC上できれいに収まってても、それより幅が狭いスマートフォン上ではマップのレイアウトが崩れる場合があります。

それを回避するには width=100% と入力して常に横幅最大を指定するか、CSSを編集してPC用とスマホ用で別々の表示サイズの指定を施す必要があります。

 

グーグルマップの「この地図は自分専用です」の意味

グーグルマップのコードを取得する際、「この地図は自分専用です」のメッセージが表示されることがあります。

(え?埋め込んだ地図は自分しか見えないの?)
と思わせるような内容で不安に感じる方もいると思われます。

 

これは自分がログインしてるアカウントに対してのみ有効なカスタマイズされた情報のことを指しているので、別の方にはあなたが埋め込んだ地図が見れないというわけではないのでメッセージについてはとくに気にしなくて大丈夫です。
(実際、ログアウトしてる状態で埋め込んだページを開いてPC、スマホ、Ipadでも地図の表示を確認済み。)

わりと多くの方が同じ疑問を持つような紛らわしい言い回しだと思います…。

 

グーグルマップの地図の埋め込み方の解説はいかがでしたでしたでしょうか。
操作は非常に簡単で時間もかからないのでよろしければ試してみてください!

 

スポンサーリンク
>THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

ザ・トールはデザイン性・機能性・利便性・SEO対策・収益面などあらゆる場面で力強いサポートをしてくれます。 一度公式ホームページをご覧ください。

CTR IMG