Google Maps API v3 の Marker を作るときにオレオレプロパティを渡したらイベントハンドラで使えたよ、という話

概要

タイトルのまんまですが、Google Maps API v3 の Marker を作るときに公式リファレンスに載っていないオレオレプロパティを含むオプションを渡したらイベントハンドラでそのプロパティが使えて便利だったよ、という話です。

はじめに注意事項

2013-07-23 にはてなダイアリーに書いた記事 と同じものです。一応、この技を使ったページは今でも正常に動作していますが、非公式の技なのでその点、ご注意ください。正確に言うと、公式のドキュメントを精読していないので、非公式かどうかも定かではありません。

詳細

Google マップに配置するマーカのコンストラクタには position や icon や title などのさまざまなプロパティをオプションとして渡せます。どんなプロパティがサポートされているかは、公式リファレンスに載っていますが、ここに載っていない独自のプロパティを渡してみたら、生成されたマーカのイベントハンドラ内でそのプロパティが拾えて便利でした。

具体的なコードを示す方が早いので。

とある農家が自分のところの畑ごとの地図情報を Google マップで表示したいと考えているケースを想定します。fields という連想配列に各畑の緯度経度、ポリゴン座標、アイコン画像などが入っているとします。
そして、指定された畑を地図の中心に持ってきて適切なサイズでズームする、という次のような関数 pahTo() が定義してあるとします。

  function panTo(key) {
    if (! key in fields) return;
    var field = fields[key];
    map.panTo(field.latlng);
    map.setZoom(field.zoom);
  }

畑ごとのマーカを次のコードで生成します。

    for (var key in fields) {
      var field = fields[key];
      if (field['poly']) {
        field.poly.setMap(map);
        var image = new google.maps.MarkerImage(field.mark.image,
                                                new google.maps.Size(64, 64),
                                                new google.maps.Point(0,0),
                                                new google.maps.Point(0, 32));
        var shadow = new google.maps.MarkerImage(field.mark.shadow,
                                                 new google.maps.Size(64, 64),
                                                 new google.maps.Point(0,0),
                                                 new google.maps.Point(0, 32));
        var opts = {
          position : field.latlng,
          title : field.name,
          icon : image,
          shadow : shadow,
          map : map,
          key : field.key
        };
        var marker = new google.maps.Marker(opts);
        google.maps.event.addListener(marker, 'click', function(e) {
          panTo(this.key);
        });

Marker のコンストラクタに渡している opts オブジェクトに key プロパティがありますが、これは Marker のコンストラクタで使われるプロパティとして定められているものではなくて、勝手に付け加えたものです。イベントハンドラのクロージャ内で this はイベントを登録した marker オブジェクトになるわけですが、ここで先ほど勝手に付け加えた key プロパティが拾えています。

実運用している例

秘密情報ですが、この技はここで実際に使っていますので、全コードを見たり、動きを見ていただくことが可能です。いつまでこの仕組みを使い続けるか不明ですが。