地図のズームレベル変更範囲を制限する

2011/09/21 | JavaScript/Ajax

Google Maps APIを使って地図を表示させる際、何も特別なことをしない限り、ズームレベルを変更するバーが1から19(くらい)に変更可能な状態となっている。例えば、極端に拡大しても意味を成さないような場合、ズームレベルを5から10の範囲以外に変更できないようにしておきたい、と仮定する。やり方が全然見つからなかった。

やりたいことは、そもそもズームレベルのバーを5から10の範囲以外を表示させたくない。バーの表示をそのままでズームレベルが変更になった瞬間に、そのズームレベルの値を読み取って、最大値もしくは最小値の値にセットしなおす、というのは簡単にできた。しかし、バーが長ければ、どうしてもその分だけ拡大縮小したくなるというものだ。

ウェブで調べたらMapTypesがどうとかこうとか書いてあったりしたけど、結局それでは動作しない(きっと仕様変更とかあったんだろう)。で、仕方なく英語で検索をかけて、適当にウェブページを読んでみた。そして、方法が見つかった!。

Google Mapsオブジェクトの生成(google.maps.Map)の引数で、単にminZoomとmaxZoomを指定、それだけでよかった。例えばこんな感じ。

var mapOptions={zoom:10, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP, minZoom:8, maxZoom:13};

あっけない。マニュアルに書いておいてくれさえすれば悩まなくても良かったのに(てか、なんとなくこんなので出来ないかな、と思っていたわけで、すぐに試せばよかったよ)。

コメントを残す


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net