Polygon.getOptions()を作る

説明

Google Maps API v3のPolygonは、google.maps.MVCObjectクラスを拡張して作られています。 MVCObjectクラスには set/get メソッドがあり、JavaScriptで作られたオブジェクトであれば何でも保存できます。

JavaScriptはprototypeチェーンなので、メソッドの入れ替えをすることが可能です。 Polygonのインスタンスを作った後に付け替えするメソッド( setOptions )のリファレンスを取得して、 別の関数にすり替えます。 その後に、なにか処理をして本来の処理を実行するとメソッドを横取り(Hook)することができます。

// 空のPolygonを作る
var poly = new google.maps.Polygon();

// 本来のPolygon.setOptions() を取得
var setOpts_ = poly.setOptions;

// 無名関数で設定されるオプションを横取りして
// "options"キーに保存するようにする
poly.setOptions = function(opts) {
  poly.set("options", opts);
  
  // 本来のPolygon.setOptions() を実行
  setOpts_.call(poly, opts);
};

// Polygon.getOptions() 関数で取り出して返す
poly.getOptions = function() {
  return poly.get("options");
};

// 初期値を設定
poly.setOptions(opts);

今回は、setOptions()で保存されるオプションをgetOptions() で取得できるようにします。
poly.set("options", opts); で渡されたオプションを丸ごと保存します。

その丸ごと保存された値を返すことで、Polygon.getOptions()が実装できます。


全体のコード

<script type='text/javascript'>

  var mapCanvas;
  function initialize() {
    var initPos = new google.maps.LatLng(41.796868, 140.756794);
    var mapOptions = {
      center : initPos,
      zoom : 16,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
    /*
     * サンプルのポリゴン作成
     */
    var points = [
      new google.maps.LatLng(41.798835, 140.756751),
      new google.maps.LatLng(41.799235, 140.758746),
      new google.maps.LatLng(41.797651, 140.759047),
      new google.maps.LatLng(41.796372, 140.760184),
      new google.maps.LatLng(41.795668, 140.758446),
      new google.maps.LatLng(41.794468, 140.757137),
      new google.maps.LatLng(41.795012, 140.756107),
      new google.maps.LatLng(41.794772, 140.754841),
      new google.maps.LatLng(41.795764, 140.754755),
      new google.maps.LatLng(41.796148, 140.753639),
      new google.maps.LatLng(41.797443, 140.754540),
      new google.maps.LatLng(41.799091, 140.754648),
      new google.maps.LatLng(41.798835, 140.756729)
    ];
    var polygonOpts = {
      paths: points,
      strokeWeight : 6,
      strokeColor : "#FF0000",
      strokeOpacity : 1,
      fillColor: "#55FF55",
      fillOpacity: 1,
      map : mapCanvas,

      // 任意のプロパティ名もOK
      name : "札幌五稜郭",
      message : "札幌五稜郭がクリックされた"
    };
    
    var poly = createPolygon(polygonOpts);
    //イベントリスナー
    google.maps.event.addListener(poly, "click", onPolygonClicked);
  }
  function onPolygonClicked() {
    // イベントリスナーから呼び出されるので、this = クリックされたポリゴン になる
    var poly = this;
    
    // オプションで設定した値を取り出す
    var txt = "";
    var opts = poly.getOptions();
    for (var key in opts) {
      if (key in opts) {
        txt += "  " + key + " = " + opts[key] + "\n";
      }
    }
    alert("[設定したオプション] \n" + txt);

    // 一部のプロパティだけ取得
    alert("[任意のプロパティ] name = " + poly.get("name"));
    alert("poly.message = " + poly.message);
  }
  function createPolygon(opts) {
    // 空のPolygonを作る
    var poly = new google.maps.Polygon();
    
    // 本来のPolygon.setOptions() を取得
    var setOpts_ = poly.setOptions;

    // 無名関数で設定されるオプションを横取りして
    // "options"キーに保存するようにする
    poly.setOptions = function(opts) {
      poly.set("options", opts);

      // 本来のPolygon.setOptions() を実行
      setOpts_.call(poly, opts);
    };

    // Polygon.getOptions() 関数で取り出して返す
    poly.getOptions = function() {
      return poly.get("options");
    };

    // 初期値を設定
    poly.setOptions(opts);
    return poly;
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら