スマートフォンやタブレットでの閲覧を考慮すれば、ページの軽量化・高速化は必須とのことです(参考:「遅すぎる日本のスマホサイトの原因を探る」)。
地図もまた然り、表示は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 とするなど、高速化を図ってきたのですが、スプライトによって速くなったのか、体感的には判りません。ただし、負荷は確実に低減されているはずです。
以上、覚書おわり。