景観デザインを目指せ

重山陽一郎の個人ブログ blog.enviro-studio.net
<< 「もち処 黒岩」の大福 | HOME | たけのこを頂きました >>
新しいGoogleMapのマイマップをホームページに埋め込む時に、位置と縮尺を指定する手順

このブログでは、あちこちの土木構造物などを紹介するときに、GoogleMapのマイマップを使っている。例えば、タウシュベツ川橋梁のマップは上の地図。
で、GoogleMapが新しくなってからマイマップをホームページやブログに埋め込むツールが貧弱になってしまい、埋め込み地図の位置や縮尺を細かく指定できなくなってしまった。全く困ったもんだ。Googleのことだから、そのうち改善されるんだろうが、とりあえず現段階での解決策の覚え書き....
 
 
スクリーンショット 2015-04-07 9.01.17
そもそも、マイマップって何?という方は、GoogleMapを開いて、検索窓をクリックすると、その下に「マイマップ」というメニューが出てくるので、それをクリックして欲しい。その先は簡単なので、いろいろいじり回していればわかる。


スクリーンショット 2015-04-07 9.08.45
で、自分で作成したマイマップを選ぶと....


スクリーンショット 2015-04-07 9.09.55
マップの内容とは無関係に世界地図が開く。北海道の事例集なら、北海道を大きく見せて欲しいじゃないか....


スクリーンショット 2015-04-07 9.13.29
そういうときは、北海道をズームアップしておいて....


スクリーンショット 2015-04-07 9.11.10
縦に3つ点が並んだアイコンをクリック


スクリーンショット 2015-04-07 9.14.07
「デフォルトビューを設定」をクリック。


スクリーンショット 2015-04-07 9.14.36
これでOK。今後は、このマイマップを開いたときに北海道がズームアップされた状態で表示される。


スクリーンショット 2015-04-07 9.15.43
マイマップをホームページに埋め込む標準の方法は、さっきと同じように「自分のサイトに埋め込む」をクリック


スクリーンショット 2015-04-07 9.16.05
コードが表示されるので、それをコピペすると、次のようになる。



これが、コードをそのままコピペしたもの。さきほど「デフォルトビュー」に指定した範囲が表示される(ちょっと違うけど)。
埋め込みコードは
<iframe src="https://www.google.com/maps/d/embed?mid=zM_X4L0PMxqo.klWFKRyoHsII" width="640" height="480"></iframe>

で、このままでは、タウシュベツ川橋梁の場所がわからないので、もっとズームアップした状態で埋め込みたいんだが、デフォルトビューは北海道全体のままで変えたくない。新しくなる前のマイマップでは簡単に設定できたんだが、今のところ、次の手順が必要。


スクリーンショット 2015-04-07 10.16.01
まず、埋め込み地図の中心としたい位置の緯度経度と、縮尺を決める。
そのために、マイマップじゃない普通のGoogleMapで埋め込み地図に表示したい範囲を表示する。マイマップじゃないので目印のピンは無いけど、我慢(^^;)


スクリーンショット 2015-04-07 10.16.56
その状態で、ブラウザのURLをコピーする。
テキストエディタなどの適当な場所にペーストすると、こんなURLになっている。
https://www.google.co.jp/maps/@43.415592,143.1907461,15z
@のあとの数字が緯度経度、15zという数字が縮尺を表している。

で、この緯度、経度、縮尺の数値を使って、先ほどの埋め込みコードをちょっと修正する。
<iframe src="https://www.google.com/maps/d/embed?mid=zM_X4L0PMxqo.klWFKRyoHsII&ll=43.415592,143.1907461&z=15" width="640" height="480"></iframe>
青い文字は追記、赤い文字はURLからコピペ


このコードを使うと、次のようになる。

目出度く位置と縮尺を指定できた(^^)
縮尺のz=の数値は0から22ぐらいまであるので、適当に調整する。



地図の周囲の枠線をなくしてみた。
コードは
<iframe src="https://www.google.com/maps/d/embed?mid=zM_X4L0PMxqo.klWFKRyoHsII&ll=43.415592,143.1907461&z=15" width="640" height="480" frameborder="0"></iframe>




さらに、航空写真にしてみた。
コードは
<iframe src="https://www.google.com/maps/d/embed?mid=zM_X4L0PMxqo.klWFKRyoHsII&ll=43.415553,143.1894962&z=18&t=k" width="640" height="480" frameborder="0"></iframe>
t=kとすると航空写真になる(中心位置と縮尺も微調整してある)。



t=pなら地形図


最後に、埋め込み地図を、ブラウザ全体に大きく表示させたいときはどうする?地図の右上の
スクリーンショット 2015-04-07 11.55.37
このアイコンをクリックすると、全画面表示になるんだが、このときは「デフォルトビュー」になってしまって、ちょっと困る。
なので、またしても埋め込みコードを使う。
<iframe src="https://www.google.com/maps/d/embed?mid=zM_X4L0PMxqo.klWFKRyoHsII&ll=43.415553,143.1894962&z=18&t=p" width="640" height="480" frameborder="0"></iframe>

先ほどの埋め込みコードの青い文字の部分をコピペし、さらに赤いembedの文字をviewerに変更....

https://www.google.com/maps/d/viewer?mid=zM_X4L0PMxqo.klWFKRyoHsII&ll=43.415553,143.1894962&z=18&t=p


これをリンク先に指定すれば、こうなる

大きな地図で見る


以上。やれやれ。
Googleさん、早く何とかしてくださいな。

ちなみに、マイマップじゃない普通のGoogleMapを埋め込む手順は、先日紹介しました

このブログは、JUGEMのブログサービスを使っているんだが、JUGEMには、はてなブログの「ブログカード」みたいなものが無いので、羨ましかったんだ。それで、自分用にブログカードを作るブックマークレットを作ってみた。HTMLコードを、クリック一発で作成できるので、便利(^^)

Category:MacときどきWin
SEARCH
FEED
FEATURE ARTICLE
CATEGORIES
CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>
LINKS
ARCHIVES