GoogleマップのJavaScript APIを使ったマップツールの修正依頼が来ました。
Googleマップで複数のマーカーを設置した際に、
すべてのマーカーが表示されるように自動で表示領域や縮尺をいい感じに調整してくれる
1 |
map.fitBounds(bounds, [option]) |
というメソッドがあります。
第一引数にマーカーの座標を入れてやるだけ(説明は割愛)なので
とても簡単で重宝するメソッドなのですが、
とあるシステムで、マップに重なる形で左側にスライド式の開閉メニューがあり、
普通にfitBoundsを実行すると一部のマーカーがメニューで隠れてしまうという問題がありました。
マーカーがメニューに隠れないようにしてほしいというのが今回の依頼なのですが、これは簡単に対応できます。
fitBoundsの第2引数でパディングを指定するだけです。
たとえば左メニューの幅が400pxだった場合は
1 |
map.fitBounds(bounds, {'left': 400}) |
とするだけで左に400pxパディングした形でfitBoundsが実行されるので
マーカーがメニューに隠れることがなくなります。
今回のシステムではメニュー幅は固定で、メニューの開閉状態だけ考慮すればよかったのでさらに簡単でした。