やまもち

お金の問題に向き合わなければ時間と自由は得られない

google Mapに説明付きの位置情報を埋め込む方法。コピペでできて一番楽な方法

ブログでお店や場所を紹介する上でなくてはならない機能がGoogle Mapを使った位置表示です。

前回、google Mapを自分のサイトに埋め込む方法として、自分で付けたピンにコメントを載せる方法を説明しました。

 

yamamochi.hatenablog.com

 

 

この使い方は、1つのgoogle Map上に複数の場所を表示させたい時や、そもそもグーグルマップ内で検索してもヒットしない知名度の低い場所を表示させたい時に便利な方法です。

 

しかし、この方法には難点があります。

それは、作成に時間がかかる。

1つの埋め込み地図を作るのに慣れてきてテキパキ作業しても5分ほどかかってしまうのです。

 

でも、すでにgoogleに場所が認識されていて、その場所を一件のみ表示する場合は、前の記事のような手間をかけることなく簡単に表示させる方法が他にあります。

今回説明する方法と、前回説明した方法のメリット・デメリットをまとめると、

 

今回の簡単な方法
  • 簡単に埋め込める(作業時間1,2分)
  • よく見る説明吹き出しが付く
  • 一件のみの紹介

 

 

前回の方法(マイマップ公開を一般公開する方法)
  • カスタマイズできる(ピンの色・形から説明文まで)
  • 複数表示ができる
  • 手間がかかる(作業時間5分〜20分)

 

 

Google Map上に1件のみを表示させる簡単な方法

例えば、「品川アクアパーク」をサイト上に埋め込んでみます。

まずGoogle Map上の「品川アクアパーク」を検索するか自力で探してピンを立ます。

 

 

すると、画面左側にサイドバーが現れます。

共有を選択。

 

 

 

地図を埋め込むを選択

 

 

埋め込む際の地図のサイズを選択することもできます。

 

実際の地図サイズ

↑「小」サイズ

 

 

↑「中」サイズ

 

↑「大」サイズ

 

 

地図のサイズ選び

地図のサイズ選びは重要です。

パソコンでサイトを見た場合も、スマホで見た場合でも文章の途中で画面全体に地図が表示されると今までのページ上のスクロールがGoogle Map内のスクロールに切り替わってしまうことが多々あります。

 

こうなると、説明したい位置が地図上から消えるだけでなく、見にきた人が思うように読み進められない不親切なサイト構成になります。

 

私がよく使うサイズは「小」「中」です。

このサイズを使えば画面全体に表示されることはなくスクロールの誤操作を起こしにくくすることができます。

 

まとめ

以上、Google Mapに1件の位置情報を表示させて、自分のサイトに埋め込む方法を解説しました。

地図を埋め込む位置は、記事の最後が最も効果的です。

記事の内容からその場所に行きたいと思った人は記事を読み終えてから、その場所を検索しますから〜