Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Google Maps に大量のマーカを表示する

Google Maps に大量のマーカを表示する - Too Many Markers!



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.


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.


Before grid-based clustering

After grid-based clustering

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.




サンプルコードなど。省略。移動した瞬間にロードすると大量にリクエストを送ってしまうので、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.


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.










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.


Zoom Level 3

Zoom Level 3

Zoom Level 6

Zoom Level 6

Zoom Level 8

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 はビューポートの面倒も見てくれる。マップをパンするとマーカーをロードする。


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.


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.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment