キムラのメモは旅・食・お酒をキーワードに様々な情報を紹介していますが、実際にそれぞれのロケーションを住所だけで表示するのはもはや時代遅れ。
そこでgoogleマイマップ機能を用いてカテゴリー毎にマイマップを作成し、各記事にそれぞれリンクを付けて表示するようにしています。
ひょんなことから「このマップ自体をページに埋め込んだ方が見やすくね？」と思い、色々と調べてみると結構簡単に出来ることが判明。
ただ、「自分のサイトに埋め込む」から表示されるリンクを張り付けるだけだと、マップの全体像が表示されてしまい、経度・緯度、縮尺を選ぶことが出来ず少々不便。
しかし、調べてみると、ひと手間かけるだけで自由自在に表示方法を設定できることが判明。
やり方は以下の通り。
１．埋め込みたいgoogleマイマップで「自分のサイトに埋め込む」からリンクを取得し、一旦それを埋め込みたいページに張り付ける
２．このままコピペしてしまうとマップ全体（地球全体）が表示されてしまうので、それを防ぐために表示させたいgoogleマイマップを、実際に表示させたい状態（経度・緯度、縮尺）で別のタブで一旦表示させる
３．２で表示させたマップのアドレスのうち”&ll”以下の文字列をコピーする
例：「https://www.google.com/maps/d/edit?hl=ja&mid=1fZQcOMW3zcTFsTFKFbWISLqdh7U&ll=35.50081571502151%2C139.71701728691403&z=10」とした場合、青字の部分がコピペの対象
４．コピーした文字列を１で張り付けたリンクの一番後ろに張り付ける
その際、途中に含まれている”%2C”は”,”に置き換える
これで自分が表示させたい経度・緯度、縮尺にてgoogleマイマップをページに埋め込む事が出来る。
こちらがgoogleマイマップで表示させたリンクをそのまま張り付けた状態のもの
地球全体が表示されてしまい、非常に使いにくい
こちらは同じgoogleマイマップのクウェート部分だけを大きく表示させた状態のもの
実際のソースコードは以下の通り
・上のもの（全体が表示されているもの）
<iframe src="https://www.google.com/maps/d/embed?mid=1fZQcOMW3zcTFsTFKFbWISLqdh7U" width="640" height="480"></iframe>
・下のもの（クウェート部分だけを大きく表示させた状態のもの）
<iframe src="https://www.google.com/maps/d/embed?mid=1fZQcOMW3zcTFsTFKFbWISLqdh7U&ll=29.22841463094648%2C47.95714485039059&z=11" width="640" height="480"></iframe>
異なっている箇所は青字の部分。
こちらで、埋め込んだマップに表示させるエリアおよび縮尺を設定している。
非常に簡単な小技ながら、覚えておくと何かと便利。
当ブログのように地図を使う場合はHP訪問者にクリックさせることなくダイレクトで地図を見られるので、HPからの離脱を減らすことも出来そうなので積極的に活用したい。
Leave a Reply