Google Maps APIで画像の一部をマーカーとして使う

Google Maps API上にマーカーを表示するには、マーカー用の画像を用意するだけでいいのだが、マーカーごとに画像を変えたいケースで、個別に画像を準備すると、サーバから画像ファイルをロードするオーバヘッドが問題になってくる。つまり、画像ファイル自体は非常に小さくても、マーカーごとにサーバから画像をダウンロードすることになり、通信コストが大きくなってしまうという問題がある。

このため、Webサイトでは、サイト内で使うアイコンなどの小さい画像を一つのファイルにしておき、表示の際に必要な部分を切り出して使うというテクニック(CSSスプライト)を用いることが多い。

Google Maps APIにも似たような機能があり、複数のマーカー用画像をまとめてロードしておき、マーカー作成時に必要な部分を指定することができる。

  • マーカー用画像を作成する
    個々のマーカー用の画像を結合して、1つの画像ファイルにする。今回は、CSSスプライト用の画像・CSSを生成してくれるサイト「CSS Sprite Generator」を利用して、連番のマーカーを作成する。もとの画像サイズは32×37で、これを縦方向に結合する。その際の垂直オフセットは’37′とし、元画像と同じサイズの空白画像を挿入しておく。ちなみにファイルサイズ700から900バイト程度の画像(1つあたり)を100個結合すると、サイズは21kbになった。

  • MarkerImageオブジェクトを使ってマーカー画像を作成する
    通常は iconプロパティには画像のURIを指定していたが、本件ではMarkerImageオブジェクトを指定する。この部分を抜き出すと以下のイメージ。

    // JavaScript
    
    // 結合したマーカー画像を指定する
    var image = new google.maps.MarkerImage('/images/icon/numbers_a.png');
    // 個々のマーカーのサイズを指定する
    image.size = new google.maps.Size(32, 37); 
    // マーカーとして切り出す部分を(x, y)で指定する
    //// 今回は同じサイズの空白画像を挿入したためインデックスを2倍する
    image.origin = new google.maps.Point(0, 37 * index * 2);
    // マーカーの影を指定する場合の起点座標
    //image.anchor = new google.maps.Point(16, 37);
    
  • マーカーを表示する
    マーカーを表示するコードは以下のイメージ。

    // JavaScript
    //// spotsArray[] に表示したい地点を格納している
    for(var i=0; i < spotsArray.length; i++){
      var pos =  new google.maps.LatLng(spotsArray[i][latStr],spotsArray[i][lngStr]);
      var image = new google.maps.MarkerImage('/images/icon/numbers_a.png');
      image.size = new google.maps.Size(32, 37);
      image.origin = new google.maps.Point(0, 37 * (i + 1) * 2);
      
      var marker = new google.maps.Marker({
        position : pos,
        icon: image,
        shadow: '/images/icon/numbers_a_shadow.png',		
        animation: google.maps.Animation.DROP,
        map : map
      });
    }
    
  • 実行例

    xtsplan03_b01

参考にしたサイト:
大きな画像の一部をマーカー画像として使う
マーカー画像のカスタマイズ

カテゴリー: Tips タグ: パーマリンク