地図の軽量化と高速化

スマートフォンやタブレットでの閲覧を考慮すれば、ページの軽量化・高速化は必須とのことです（参考：「遅すぎる日本のスマホサイトの原因を探る」）。
地図もまた然り、表示は1秒でも速いにこしたことはありません。
たとえば、以下のマーカー・アイコン（いずれも32px四方）は、8種あわせて12.3KBとなります。

、、、、、、および

スプライト（Sprite）ならば、どの程度、軽くなるのか？　試してみました。
たとえば Generator サービスで、次のような1点のスプライト PNG 画像にまとめてもらいます。

ヨコ並びに幅が277px となりますが 6.4KB です。同時に次のような CSS が出力されるのでメモ

.sprite-blue-dot {background-position: 0 0; width: 32px; height: 32px;}
.sprite-green-dot {background-position: -35px 0; width: 32px; height: 32px;
.sprite-ltblue-dot {background-position: -70px 0; width: 32px; height: 32px;}
.....

35px や 70px といったオフセット値を、次のように javascript で使いまわし

var json = [
  {"title":"A", "lat": 35.69, "lng": 139.693, "desc":"Blue"},
  {"title":"B", "lat": 35.69, "lng": 139.695, "desc":"Green"},
  {"title":"C", "lat": 35.69, "lng": 139.697, "desc":"Lightblue"},
  .....
]
for (var i = 0, length = json.length; i < length; i++) {
  var data = json[i], spriteLL = new google.maps.LatLng(data.lat, data.lng);
  var tipo;
  if (data.title == "A") {tipo = new google.maps.Point(0, 0)}
  if (data.title == "B") {tipo = new google.maps.Point(35, 0)}
  if (data.title == "C") {tipo = new google.maps.Point(70, 0)}
  .....
  var markerIcon = {
    anchor: new google.maps.Point(16, 32),
    origin: tipo,
    size: new google.maps.Size(32, 32),
    url: "./dot-marker.png"
  };
  var spriteMarker = new google.maps.Marker({
    position: spriteLL,
    map: spriteMap,
    title: data.title,
    icon: markerIcon
  });
}

1点の PNG 画像でカラフルなマーカーの使い分け、できあがり

Polyline を Encoded path とするなど、高速化を図ってきたのですが、スプライトによって速くなったのか、体感的には判りません。ただし、負荷は確実に低減されているはずです。
以上、覚書おわり。