マーカーをまとめて追加

表示する最小ズームレベルと最大ズームレベルとが同じマーカーが数多くある場合にはaddMarkerメソッドの代わりにGMarkerManagerクラスで定義されているaddMarkersメソッドを使うと便利です。

addMarkers(markers:GMarker[], minZoom:Number, maxZoom?:Number)

このマーカー マネージャに一群のマーカーを追加します。refresh() メソッド
が呼び出されるまで、マーカーは地図に追加されません。地図上に配置した場
合、地図の現在のビューポート内で地図のズーム レベルが指定された minZoom 
より大きいか同じであればマーカーが表示されます。maxZoom が指定された場
合、地図のズームが指定されたものより大きいとマーカーは自動的に削除され
ます。

1番目の引数にGMarkerクラスのオブジェクトの配列を指定します。2番目及び3番目の引数についてはaddMarkerメソッドの場合と同じです。

このメソッドを使用した場合、GMarkerManagerクラスで定義されているrefreshメソッドが実行されるまでマーカーは追加されません。

refresh()

地図上に表示されるマーカーをマネージャに更新させます。このメソッドは、
マーカーが addMarkers メソッドを使用して追加された場合に呼び出される必
要があります。

実際には次のように記述します。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

var manager = new GMarkerManager(map);

var markers = [
  new GMarker(new GLatLng(35.176468,136.896866)),
  new GMarker(new GLatLng(35.174153,136.8970979)),
  new GMarker(new GLatLng(35.173234,136.89762))
];

manager.addMarkers(markers, 15);
manager.refresh();

一度にマーカーが地図に追加されるため、速度的にも(恐らく)改善されるのではと思います。

サンプルプログラム

では試してみます。

code2_1.js

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.172999,136.897057), 12);

    var manager = new GMarkerManager(map);

    var markers1 = [
      new GMarker(new GLatLng(35.176468,136.896866)),
      new GMarker(new GLatLng(35.174153,136.8970979)),
      new GMarker(new GLatLng(35.173234,136.89762)),
      new GMarker(new GLatLng(35.173383,136.89987)),
      new GMarker(new GLatLng(35.172986,136.899894)),
      new GMarker(new GLatLng(35.172848,136.897845)),
      new GMarker(new GLatLng(35.174106,136.896676)),
      new GMarker(new GLatLng(35.175878,136.896483))
    ];

    var markers2 = [
      new GMarker(new GLatLng(35.17613,136.89667)),
      new GMarker(new GLatLng(35.174131,136.896885)),
      new GMarker(new GLatLng(35.173034,136.897818)),
      new GMarker(new GLatLng(35.173192,136.899881))
    ];

    var marker3 = new GMarker(new GLatLng(35.172999,136.897057));

    manager.addMarkers(markers1, 16);
    manager.addMarkers(markers2, 14, 15);
    manager.addMarker(marker3, 0, 13);

    manager.refresh();
  }
}

map2_1.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：マーカーをまとめて追加</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p2-1

マーカーの追加方法を変えただけなので、ズームレベルによってどのようにマーカーが表示されるのかは前のページと違いがありません。

p2-2

p2-3

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。