WordPressにGoogle Maps API V3！

Google Geoブログで、Google Maps APIのアプリケーションAPI開発に重視しているソフトウェア技術者が発表した最初のライブラリに、MarkerClustererがあります。 Google Maps APIで大量のマーカーを取り扱うアプリケーション開発で問題にぶつかり（地図表示の遅れ）、それはブラウザが何千ものDOM要素を作成することのに非常に多くの処理を必要とするからだとっています（マーカーがDOM数要素の組み合わせであるため）。

そこで、クラスタリング（clustering）が良い解決になるであろうと、MarkerClustererを思いついたとのことです。 MarkerClustererとは、ラベルでマーカーを異なったクラスタに集めて、各クラスタにマーカーの数を表示するものです。地図のズームレベルが変化すると、それに併せて新しいクラスタが作成されていきます。 デモをブラウザGoogle Chromeで試すと、1000マーカーで約160msecでした（驚き！！）

◆自分でもやってみた。 驚いた！何と遅いI.E7でも2000マーカの大量のマーカー（アイコン）でも動く。ズームは、弱いが、地図の横移動はストレスがない。

• 500マーカーをランダムに表示したサンプル

◆Google Maps API MarkerClusterer Examples

marker clustererを使用するには、MarkerClustererオブジェクトを作成してください。 最も簡単な場合では、ただ地図をそれに渡してください。

var map = new GMap2(document.getElementById(“map”)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mc = new MarkerClusterer(map);

また、あなたは、マーカーマネージャの実績について微調整するために多くのオプションを指定できます。 これらのオプションはMarker Clusterer Optionsオブジェクトを通して合格されます。 Marker Clusterer Options オブジェクトがobject literalであるので、単純に宣言するだけです:

var map = new GMap2(document.getElementById(“map”)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions);

一度マーカークラスタを作成すると、それにマーカーを追加したくなると思います。 MarkerClustererは、メソッドかマーカーの配列をconstructorに提供し、addMarkers()を使用することでマーカーの追加をサポートします:

var map = new GMap2(document.getElementById(“map”)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mcOptions = { gridSize: 50, maxZoom: 15}; var markers = […]; // Create the markers you want to add and collect them into a array. var mc = new MarkerClusterer(map, markers, mcOptions);

◆使えそうなのでもう少しいじってみました。

• http://waox.main.jp/news/?page_id=1062

スポンサードリンク