「Google Maps JavaScript API v3」で、マウスオーバー時にマーカー画像(アイコン)を変える。(hoverのような処理)

google mapsで地図上に表示されているマーカーを、マウスオーバー時に変えたい場合の方法です。
意外にこれが、マーカー マウスオーバーとかで検索しても出てこなかったんだなぁ。

マーカーを作るときは例えばこんな感じですよね。([LatLngオブジェクト]のように記載しているところは、その種類のオブジェクトを渡す、という意味です。)

myMarker = new google.maps.Marker({
  positon: [LatLngオブジェクト],
  map:[マーカーを表示する地図],
  icon:[MarkerImageオブジェクト]
});

上記では最初にマーカーを作るときに「icon」のところで、カスタムの画像を設定するわけです。(画像のURL、サイズ、中心点など)

ここまでは基本で、次にマウスオーバー、マウスアウトの動作を設定します。
setIconというメソッドを使用します。
例えば、

google.maps.event.addListener(myMarker, 'mouseover', function(){
  myMarker.setIcon([画像のURLもしくはMarkerImageオブジェクト])
)};

マーカーにイベントのリスナー(マーカーに対してイベントが起こったことを伝えるもの)を設定し、mouseoverイベントを取得します。
その後、setIconを実行して、画像を差し替えるわけです。

setIconの引数は画像のURLだけの場合、中心点が画像の下の真ん中になるようです。この辺をカスタマイズしたい場合はMarkerImageできちんと諸々の設定を渡してあげる必要があるようです。

ということで、マウスオーバー時のマーカー画像の差し替えについて、でした。
CSSとかjQueryならhoverだけですぐにできちゃったりすることなのに、google mapsはヤヤ面倒ですねぇ。

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Adobe Photoshop CS6の自動保存機能のファイル保存場所