[メモ]新しいgoogleマイマップでのblog貼り付け方法

googleマップが新しくなり,新しくなるのはいいんですがマイマップを自分のblogに貼り付けるのは不便になってしまいました.
以前はマイマップを任意の大きさで好きな部分を拡大して貼り付けることができたのですが,新しいマイマップは決められた大きさで一つのマイマップ全体を貼り付けられるだけでカスタマイズすることができません.
ということで,ちょこっと見たら手動で(めんどくさいですが)以前のように貼り付けられるのでメモしときましょ.

まず準備から.標準の埋め込み用コードを取得します.
googleマップを開きます.
からっぽの検索欄をクリックして入力しようとすると「マイマップ」というのが出てくるのでそれをクリック.


すると直近5つのマイマップがリスト表示されますがそれは無視して「マイマップをすべて見る」を選択.


過去の(以前のマイマップで作ったものも含む)マイマップがリスト表示されるので貼り付けたいマイマップにチェックをいれて選択.


すると選んだマイマップが編集可能の状態で表示されます.


次にそのマイマップの共有範囲の設定です.右上の共有から


保存を選択し共有の範囲を


「リンクの共有」を「ウェブで一般公開」にします.

「ウェブで一般公開」にしないと埋め込み用のコードが取得できません.

次に,左上のフォルダアイコンから「自分のサイトに埋め込む」を選びます.


表示された埋め込み用コードをコピーします.ここまでが準備.


そのコードがこれ.
<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM" width="640" height="480"></iframe>

赤字部分が肝心のこのマイマップのurlです.

そのまま貼り付けるとそのマップ全体が貼り付けられてしまいます.
こんな感じ.


そこでカスタマイズw

1.まずマイマップの中の貼り付けたい位置を指定します.
中心にしたい位置の緯度経度で指定します.
&amp;ll=[緯度],[経度]
の形式で数字で指定します.

<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
" width="640" height="480"></iframe>

緯度経度を調べたいときはgoogleマップで右クリックして,「この場所について」を選んで


表示された数字をコピペすればok.


旧神戸三越前(元町6交差点)を中心にするとこんな感じ.


2.次に表示させたい尺度を指定します.

<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" width="640" height="480"></iframe>

数字が大きいほど拡大されて貼り付けられます.
z=15のとき.


z=16のとき.

3.表示させたいマイマップの大きさを変えたい場合は,width="640" height="480”の数字を変更します. widthが幅 heightが高さ のピクセルです.
幅を width="480" に変更してみましょう.

<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" width="480" height="480"></iframe>


幅が狭くなり正方形になりました.高さサイズの変更も同様です.

4.マイマップを貼り付けるだけでなく,該当マイマップへのリンクを貼りたい場合は
マイマップのurlを

<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" width="640" height="480"></iframe>

<small>より大きな地図で
<a href="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" style="color: blue; text-align: left;">sanpo kobe
</a> を表示
</small>

という感じで貼り付けます.

より大きな地図で sanpo kobe を表示 

と,↑こんな感じで貼り付けた地図の下にリンクが追加されます.

まとめるとマイマップのurl,中心緯度経度,尺度などのパラメータを手動で書いて貼り付ければokです.

サンプル
<iframe src="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" width="640" height="480"></iframe>

<small>より大きな地図で
<a href="https://mapsengine.google.com/map/embed?mid=zDH08K8PPTqA.k7z6W1zilnFM
&amp;ll=34.683187, 135.179586
&amp;z=15
" style="color: blue; text-align: left;">sanpo kobe
</a> を表示
</small>

以上です.