グーグルマップのアイコンサイズをズームの倍率によって変える方法

グーグルマップのアイコンサイズをズームの倍率が変わる毎に変更したかったんだが、検索してもなかなか情報が見つからなかったのでメモ。

google Maps APIにGMarkerManagerというAPIがバージョン2.67から追加されてる。
GMarkerManagerは本来ズームの倍率によってマーカーの表示／非表示を操作するたのAPIだが、コレを使うとやりたいことができるとです。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(33.49788, 130.71807), 11);
var mm = new GMarkerManager(map);  // ←(setCenterしていないとnewする時にエラーが発生する)

var point = new GLatLng(33.49788, 130.71807);

// アイコンサイズが違うGIconを作成
var iconS = new GIcon();
iconS.image = "./resources/img/small.png";
iconS.iconAnchor = new GPoint(0,0);
iconS.infoWindowAnchor = new GPoint(20,30);
var iconM = new GIcon();
iconM.image = "./resources/img/medium.png";
iconM.iconAnchor = new GPoint(0,0);
iconM.infoWindowAnchor = new GPoint(20,30);
var iconL = new GIcon();
iconL.image = "./resources/img/large.png";
iconL.iconAnchor = new GPoint(0,0);
iconL.infoWindowAnchor = new GPoint(20,30);

// pointは同じでサイズの違うアイコンのマーカーを作成
var markerS = new GMarker(point, iconS);
var markerM = new GMarker(point, iconM);
var markerL = new GMarker(point, iconL);

// GMarkerManagerにマーカーを追加
mm.addMarker(markerL ,13);        // 倍率が13以上はアイコン大
mm.addMarker(markerM ,8 ,12 );    // 倍率が8〜12はアイコン中
mm.addMarker(markerS ,0 ,7 );     // 倍率が0〜7はアイコン小
mm.refresh();                     // ←マーカーを追加たらリフレッシュが必要

これで倍率を変更すると、実際はアイコンが切り替わっているのだが倍率によってアイコンサイズが変わっているように見える。

yummy-yummy

グーグルマップのアイコンサイズをズームの倍率によって変える方法

参考サイト

Google Maps API Tutorial

GOOGLE MAPS HACKSTM