Google Mapsのマーカーにフェードやアニメーション効果を実装する方法

Google Maps JavaScript APIには、マーカーをフェードイン・フェードアウトさせるための公式メソッドが用意されていません。そのため、標準的なAPIの範囲では、マーカーに透明度（opacity）を使ったアニメーション効果を直接適用することはできません。

Custom Overlayでマーカーをシミュレートする

この制限を回避するために有効なのが、カスタムオーバーレイ（Custom Overlay）を作成し、マーカーを疑似的に再現する手法です。カスタムオーバーレイは通常、div要素で構成されており、このdivに対してJavaScriptまたはjQueryから透明度を自由に操作できます。

カスタムオーバーレイの仕組み

google.maps.OverlayViewクラスを継承した独自のクラスを作成し、onAdd()メソッド内でdiv要素を生成してマップのoverlayLayerペインに追加します。これにより、CSSトランジションやjQueryのfadeIn()/fadeOut()などを活用した滑らかなエフェクトが実装可能になります。

既存のマーカー画像をDOMから操作する

カスタムオーバーレイを作らず、既存のマーカーに直接エフェクトをかけたい場合は、マーカー作成時に optimized: false オプションを指定することが重要です。そのうえで、次のようなコードでマーカー画像のDOM要素を取得します。

var newmarkerimg = $('#map_canvas img[src*="iconmarker "][class!="imageadjust "]');

このコードでは、map_canvas内のimg要素のうち、src属性に「iconmarker」を含むものを選択しています。「imageadjust」クラスを持たない要素に限定することで、位置調整用の画像などを除外しています。

optimized: false を指定する理由

デフォルトの状態（optimized: true）では、複数のマーカーが1つのcanvasにまとめて描画されるため、個々のマーカーをDOM要素として取得できません。optimized: false を指定すると、各マーカーが独立したimg要素としてDOM上に配置されるため、jQueryなどによるスタイル操作やアニメーション処理が可能になります。

このように、API単体では実現できないマーカーのアニメーションも、カスタムオーバーレイやDOM操作を組み合わせることで、柔軟かつ美しい演出を行えます。