• Too Many Markers! - Google Maps API — Google Developers
  • https://developers.google.com/maps/articles/toomanymarkers

を読んだメモです。

Introduction

Some applications are required to display a large number of locations or markers. Despite the v3 JavaScript API's significant improvement to performance, naively plotting thousands of markers on a map can quickly lead to a degraded user experience. Too many markers on the map cause both visual overload and sluggish interaction with the map.

v3 でパフォーマンスは大幅に改善された。それでも、大量のマーカを配置しようとすると、ユーザエクスペリエンスは急激に悪化する。

To overcome this poor performance, the information displayed on the map needs to be simplified.

パフォーマンスを改善するには、地図に表示する情報を単純化する必要がある。

One approach at simplification is to render markers on the server.

単純化のアプローチの1つとして、マーカをサーバでレンダリングする方法がある。

Google provides two services built into the v3 API that make this easy to achieve: FusionTablesLayer and KmlLayer.

Google は v3 API で (サーバでマーカをレンダリングする) 2つのサービスを提供している。

• FusionTablesLayer
• KmlLayer

If you'd prefer to perform computations on your own server, this can be accomplished by creating a custom overlay from imagery that is pre-rendered, or rendered on the fly.

自前のサーバで計算したい場合は、プリレンダー、もしくはオンザフライでレンダリングした画像から、カスタムオーバーレイを作ることで実現できる。

Another useful optimization technique involves viewport marker management:

別の最適化テクニックとして、ビューポートマーカマネージメントがある。

restricting the markers rendered on the map into only those that exist within the viewable area.

表示エリアに限定して、マーカを地図上にレンダリングする。

If you still want to display many markers on the map, consider creating a custom overlay that displays markers with minimal functionality.

それでも地図に大量のマーカを表示したい場合は、最小限の機能だけもったマーカを表示するカスタムオーバーレイを作ることを検討しよう。

This approach may garner performance improvements over standard markers provided by the API.

このアプローチによって、API によって提供される標準のマーカーよりも、良いパフォーマンスを得られるだろう。

Clustering simplifies your data visualization by consolidating data that are nearby each other on the map in an aggregate form.

クラスタリングは、互いに近くにあるデータを統合することで、データビジュアライゼーションを単純化する。

These varied approaches are outlined in the following sections:

これらの様々なアプローチを以下のセクションで解説する。

1. Grid-based Clustering 自前で実装
2. Distance-based Clustering 自前で実装
3. Viewport Marker Management 自前で実装
4. Fusion Tables サービス
5. MarkerClusterer ライブラリ
6. MarkerManager ライブラリ

Grid-based Clustering

Grid-based clustering works by dividing the map into squares of a certain size (the size changes at each zoom) and then grouping the markers into each grid square.

地図をズームレベルに応じた四角形に分割し、マーカをグループ化する。

↓

This technique can be rather quick because it only requires iterating through the markers once to see if its position is between a set of coordinates; no complicated distance calculation is needed.

複雑な距離の計算が不要なので、比較的高速。

It does have some limitations, as you can see marker's 7 and 8 are close together but because they are in separate grids they are not clustered together.

欠点。すぐそばにある 7 番と 8 番のマーカが別々のグリッドに分かれてしまう。

Note that each cluster is at a precise grid coordinate which may cluster, say, 5 markers, but put them all at the center of the grid rather than their centroid. The ending result might not accurately describe the data, so this is something that should be considered.

欠点。グリッドの重心ではなく、中心にマーカが配置されてしまう。データを正確に反映できない。

Distance-based Clustering

Distance-based clustering is similar to grid-based clustering, except instead of creating clusters of fixed square bounds, clusters are created based on the distance between the marker and a cluster centroid.

四角いグリッドのかわりに、マーカ間の距離とセントロイド(重心)に基づいてクラスタを作る。

Cluster centroids are generally specified algorithmically through iteration of the existing marker locations.

クラスタセントロイドは、通常、マーカ位置からアルゴリズムで決定する。

For each marker you look at each cluster

各マーカについて、各クラスタをみる。

to see how far it is from the center of the cluster.

クラスタの中心からどれだけはなれているかをみるため。

If the distance is less than a maximum (user specified) distance and the cluster is the closest, then that marker is added to the cluster.

もし、決められた最大値よりも近く、かつ、そのクラスタが他のどのクラスタよりも近い場合に、マーカをそのクラスタに追加する。

If the marker fails to be added to any cluster then a new cluster is created containing that marker.

どのクラスタにも追加されなかった場合は、新しいクラスタを作る。

No current public library for doing distance-based clustering exists, but you can see how it would work from the images below.

この計算をするパブリックなライブラリは存在しないが、以下の画像でどのように機能するかわかるだろう。

表など。大したこと書いてないので省略。

Viewport Marker Management

Viewport marker management is not a clustering technique, although it can be combined with any of the other clustering methods already listed.

ビューポートマーカマネージメントはクラスタリングのテクニックではないが、クラスタリングと組み合わせて使える。

A viewport marker manager works by getting the current bounds of the map that is visible to the user, then — based on the map's bounds — a query is sent to the server to get all the markers that lie within the bounds.

見えてる場所だけ取ってくるクエリをサーバに送信。

As the user pans/zooms the map subsequent requests are sent to the server to get the new markers.

ユーザがパン・ズームしたら、新しいマーカを取ってくるため、リクエストを送信する。

All markers that are no longer in view are generally removed to improve map performance.

パフォーマンスのため、見えなくなったマーカは削除する。

As as example, look at the images below. The blue square represents the user's current viewable area. In the first image, all markers are loaded and displayed on the map, even the ones that are outside the viewport of the user. This isn't very useful for the user because they have had to waste their time and bandwidth downloading and processing markers that they are not able to see and might not ever pan them into view.

下図参照。青い四角がビューポート。全マーカをロードするのはうれしくない。

Now, compare the next two images. Only the markers in the square are loaded, this reduces load time and improves performance and as the box moves only the needed markers are shown and the rest are removed.

下の2つの図と比べてみよう。四角の中だけロードする。四角から外れたマーカは削除する。

サンプルコードなど。省略。移動した瞬間にロードすると大量にリクエストを送ってしまうので、map idle イベントを使う。

google.maps.event.addListener(map, 'idle', showMarkers);

map.getBounds() で領域を取れる。

var bounds = map.getBounds();

Fusion Tables

The Google Maps API allows you to render data contained within Google Fusion Tables as an interactive layer on the map.

Google Maps API によって、Google Fusion Tables のデータを地図上にレンダリングできる。

By using FusionTablesLayer from the JavaScript API, a large number of points can be displayed on the map.

JavaScript API の FusionTablesLayer を使って、膨大な点を地図上に表示できる。

Because rendering is performed on Google servers rather than within your users' browsers, performance is improved dramatically.

レンダリングはGoogle のサーバ上で行われ、パフォーマンスは劇的に向上する。

Fusion Tables also allows SQL-like queries against the data in the table.

Fusion Tables で SQLライクなクエリを使える。

New tiles are generated on the fly that represent the data returned in the query.

新しいタイルが、クエリに応じて、オンザフライで生成される。

You can see a good example here, as you move the slider it will re-query the fusion table for trails that are less than the specified value.

サンプル。スライダを動かすと、指定された値より短い道を再検索する。

Fusion Tables Layers are currently listed as experimental.

まだ実験段階。

Read more about Fusion Tables to get started, then read our documentation on FusionTablesLayer so you can start using them with your map.

• Fusion Tables ドキュメント
• FusionTablesLayer ドキュメント

MarkerClusterer

The MarkerClusterer is a client side utility library that applies grid-based clustering to a collection of markers.

MarkerClusterer は、グリッドベースのクラスタリングを行うクライアントサイドライブラリ。

It works by iterating though the markers in the collection that you wish to cluster and adding each one into the closest cluster if it is within in a minimum square pixel bounds.

一連のマーカを処理して、最小のピクセル範囲内にあるマーカをクラスタに追加する。

デモ見れば大体わかるので以下略。

MarkerManager

The MarkerManager allows you to more discretely define what markers you want visible at different zoom levels.

MarkerManager を使うと、異なるズームレベルでどのマーカを見せたいか、個別に定義できる。

The MarkerManager has a more involved setup than the MarkerClusterer, but it does allow for more customisation of what and where it displays.

MarkerClusterer よりも複雑だが、何を表示するか細かくカスタマイズできる。

The idea is pretty simple: for each zoom level, decide what markers you want to show.

アイデアはシンプルで、各ズームレベルでどのマーカを表示するか決める。

Using weather icons as an example, when the user is zoomed out and can see many countries, you might want to only show a single weather icon above each country. As a user zooms in, you might want to show more specific weather for different locations.

天気アイコンの例。ズームアウトしていると国毎に1つのアイコンを見せ、ズームインすると、場所毎に異なる天気を見せる。

Zoom Level 3

Zoom Level 6

Zoom Level 8

In the example above there are three groups of markers, one set is showing from zoom level 0 to 3, the next from 4-6 and the last group from zoom level 8 onwards.

上の例では、マーカは3つのグループに分かれている。0-3 レベル、4-6レベル、8 以降のレベル。(7は?)

The MarkerManager takes care of showing markers that are currently in the view; as the map pans, it loads more markers that the user can see.

MarkerManager はビューポートの面倒も見てくれる。マップをパンするとマーカーをロードする。

Conclusion

In this article, we've shown various advanced marker management techniques within the Maps API.

Maps API にある様々なマーカマネージメントテクニックを見てきた。

No one technique is "right" or "wrong" so choose the technique that works best for you within your application.

どれか1つのテクニックが「正しい」「誤り」ということはない。アプリケーションに最適なテクニックを選べばよい。

If you display many markers, consider that you probably should perform some marker management, and use this article to help you choose which technique is right for you.

たくさんのマーカを表示したい場合、いくつかのマーカマネージメントを検討する必要があるだろう。この記事が助けになれば。