Performance Tips for Geo API mashups (GDD09)

Performance Tips for Geo API mashups
パメラ フォックス氏

Google Maps APIがv3になり、パフォーマンスが良くなった点やその特徴、
このような場合には、このような解決の方法がありますよという、
豊富な事例 (Tips) を示されていたと思います。

下記は、Google I/Oの記事。
PDFのダウンロードのリンクもあります。

Performance Tips for Geo API Mashups

-------

Google Maps API v3

v2とv3のスピードの比較


How does v3 accomplish this improvement
v3は、どのように改善されるか

・Static mapを最初に表示し、読み込む
・MVC Architechture
・ブラウザによって速さが違う
・module化したコード
・今使わないコードは、ダウンロードしない

What does v3 look like?

・Simple Map

What can you do with v3

・Markers, Controls, InfoWindows
・Custom Overlays
・Geocoding (Forward / Reverse)

Displaying Many Markers
たくさんのマーカーを表示する場合
・Static mapsの場合、Gmakerは1回では10個
　→Light-weight Markerを使う (Many Markers Comparison)


Custom Overlay: Code
First, subclass GOverlay;

　var SuperMarker = function() {
　//This will the pseude-marker objects
　this.layer = null;

　//This will hold the layer DOM object
　this.node = null;
　}

　SuperMarker.prototype = new GOverlay();
---

Next, implement initialize, which is called by the API


　SuperMarker.prototype.initialize = function(map) {
　　 this.map_ = map;

　　//Create a DIV dom node for the layer
　　this.node = document.createElement("div");

　　// add the node to the map marker pane.
　　this.map_.getPane(G_MAP_MARKER_PANE).appendChild(this.node);

　　this.redraw(true);
　};

---

Custom Overlay: Code Finally, add just one SuperMarker to the GMap, and call the SuperMarker's draw method when you want to draw pseudo-markers:
最後に、1つのSuperMarkerをGMapに加えて、pseudo-markersを
描画したい時に、SuperMarkerの描画メソッドを呼ぶ。

　var superMarker = new SuperMarker ();
　map.addOverlay(superMarker);

　// draw one marker lat 10' lon 10' lon
　layer = {markers:[id:1, point:new GLatLng(10,10)]};
　superMarker.draw(layer);

　// do some more stuff, now draw a different marker
　layer = {markers:[id:2, point:new GLatLng(20,20)]};

---

Problem: Too Many DOM Nodes
大量のDOM Nodes
inner Htmlが早くなる



More Clustering Resources
・Artucke: Hadinling Large Amounts of Markers
・Python k-means
・Maptimize

例：
・自分の住んでいる地域の人の支持党の分布
・そんなに多くなくてもよい寄付の分布
・ヒートマップ
等々

Solution: Tiny Clickable Markers　
・Google Local Search
・Clickable Tile Layer

例：お寿司屋さん

１０個以上は小さなマーカーでみせるように等,タイルとしてレンダリングしている。

クリッカブルタイル
・タイルが入ってくるとクッキーを出す
・すべてがタイル上
---

Rendering Large Polys

Problem:
・GPolygon is Full-Featured Fatty


・Too Many Points


ポリライン
・色々のAPIを参照すると重い
・ポイントが多すぎる

Solution:
・Encoded Polys：Encoded Poly Example


・Data Simplification
　・MapShaper
　・MapSimplication
　・Mapping the Votes: Resources

・Browsers + Vector Graphics = :(
・Tile Layers


・Clickable Tiles


　・Primary Map


Choose Your Solution Wisely

Performance
　　VS.
Interractivity
　　VS.
Engineering Effort

----------------------------------------------

関連URL

The Google Maps API V3
http://code.google.com/intl/ja/apis/maps/documentation/v3/