グーグルマップをサイトに埋め込み表示させる方法【誰でもできる】

f:id:nyansan2:20181107170434j:plain

ホームページを運営していると、グーグルマップを埋め込みしたい時がありますよね。

 

こういうやつです↓

観光地やお店などを紹介したい時にはとても有効です。ユーザーが検索する手間が省けるので、記事の質向上にもつながりますね。

 

さて、今回はこの【グーグルマップの埋め込み方法】について分かりやすく解説していきます。またその後にサイズの調節方法について補足。

 

インターネット初心者で、「htmlって何?」という方でも理解できるよう、くどいほど丁寧に説明するので、皆さんぜひチャレンジしてくださいね。

 

スポンサーリンク

グーグルマップ埋め込み表示する方法

1.グーグルマップを開き、住所や建物名を入力

f:id:nyansan2:20181107155911j:plain

 

2.「共有」をクリック

f:id:nyansan2:20181107160023j:plain

 

3.「地図を埋め込む」をクリック

f:id:nyansan2:20181107160129j:plain

 

4.サイズを調節(詳細は後述)

f:id:nyansan2:20181107160058j:plain

 

5.「htmlをコピー」をクリック

f:id:nyansan2:20181107160115j:plain

 

6.html編集モードを開く

はてなブログの場合【html編集】

f:id:nyansan2:20181107161113j:plain

 

ワードプレスの場合【テキスト】

f:id:nyansan2:20181107162711j:plain

 

7.htmlコードを貼り付け

f:id:nyansan2:20181107161137j:plain

 

これで完成です

f:id:nyansan2:20181107163442j:plain

以上で完成です。無事にマップの埋め込みが成功しているか、プレビューモードで表示確認してみましょう!

 

スポンサーリンク

グーグルマップのサイズを調節

先ほどのhtml取得画面で、サイズを選択する画面がありましたよね。大・中・小・カスタムの4つが選択できますが、実際に各サイズを表示させてみましょう。

 

小サイズ(400×300)

私がよく利用するサイズです。それほどスペースも取らないので、特殊な理由がない場合はこちらで十分かと思います。

 

中サイズ(600×450)

それなりに大きなサイズですね。記事の内容において、場所を伝えることの重要性が高い場合は、こちらを利用するとよいでしょう。

 

大サイズ(800×600)

こちらのサイズだと、マップそのものがメインコンテンツのようですね。ユーザーに「周辺を確認してほしい」という意図がある場合は使用してもよいかもしれません。

 

カスタム(自由に設定)

最後はカスタム設定ですね。自分の好きなサイズに設定できます。上の地図は最小値の【200×200】に設定してみました。記事の構成にこだわりをもたれている方は使用してみましょう。

 

f:id:nyansan2:20181107164551j:plain

設定方法は簡単で、赤線内に好きな数字を入力してください。
左側が横幅、右側が縦幅の数値です。

 

スポンサーリンク

まとめ

以上です。
グーグルマップの埋め込み、皆さんできましたか?

 

とても簡単な作業で、ユーザビリティが高まるため、特定の場所を紹介する際はぜひ活用なさってみてくださいね。

コメント

タイトルとURLをコピーしました