Google Maps Apiで標準の赤以外のマーカーを高速にプロットする

まあ別に高速というほどではないのですけどね。

tree-mapsをリニューアルした際に、標準の赤以外のマーカーの実装をしました。その時、どのように高速にマーカーを配置するのかについて、備忘録的なメモを残しておきます。

使用するAPI

赤以外のマーカーの画像配置は、google.maps.MarkerImageを使用します。

MarkerImageなので、画像のURLをオプションに指定する必要があります。

では軽い画像、CDN等でキャッシュされていて、大量アクセスが飛んでもびくともしないマーカー画像はあるでしょうか？

MarkerImageで使う画像

新tree-mapsでは、以下をマーカー画像として使いました。

sites.google.com

kml4earth.appspot.com

google mapには赤い画像しか無いので、他のgoogleのサービスの画像を使ってしまえばいいのです。ドメインを見ると解りますが、両者ともgoogleが提供しているマーカー画像集となっています。（片方はgoogle earthのマーカー画像です）

これらのマーカー画像は If-Modified-Since をきちんと返してくれるので、更新が無ければ304 not modifiedとなり、画像をリクエストしにいかなくなります。従って画像の取得は非常に高速になります。

例えば緑のマーカーを表示する場合は、以下のようにします。これで標準の赤マーカーと同等の速度でプロットできます。

new google.maps.Marker({
    map: map,
    position: latLng,
    icon: new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/green-dot.png')
});

※ map, latLngは適当に変数に当てはめて下さい。

別のマーカー画像

以下のサイトでもマーカー画像を配布しているようです。

www.googlemapsmarkers.com

こちらのサイトはマーカーのカラーをURLで指定可能で、マーカー内にリテラルを埋め込む事もできるようですが、リテラルを埋め込むのはやめたほうがいいですね。

恐らくリアルタイムに画像を生成されていますが、行番号等を埋め込んでしまうとキャッシュが効かない状態に陥ってしまい、マーカー画像のhttpリクエストが物凄い沢山飛んでしまい迷惑をかけてしまいます。

外部のサービスを利用する際は迷惑がかからないようにしたいですね。

雑感

正直、最初はまさかgoogle earthのマーカー画像をgoogle mapで使う発想はありませんでした。やはりstack overflowさまさまですね。

google提供の画像であれば、いくらいじめてもまあ大丈夫でしょう。きっと。。