3-3.大きな画像の一部をマーカー画像として使う

　Google Maps API v3 から新しくサポートされた「一枚の画像ファイルの一部をマーカー画像として使う」方法を利用します。あらかじめ１枚の画像ファイルの中に複数のマーカーの画像を作成しておき、その座標とサイズを指定することマーカー画像として利用することが出来ます。この方法を利用すると、マーカー用画像の作成が簡単になるだけでなく、ブラウザがサーバーとの通信回数が少なくなるため読み込みが早くなります。

　MarkerImage クラスに「origin」というプロパティがあり、origin に指定した位置を基準点にして MarkerImage クラスの sizeプロパティで指定したサイズをマーカー画像として扱うことが可能です。 anchor プロパティはマーカーの「付け根」となる位置で、size プロパティで指定した画像の範囲内の相対座標で指定します。

markerA-E.png の一部と shadowMarker.png が合成されてマーカー画像が作成される
※32-bit 透過PNG または、透過GIF で作成してください。

　次のコードでは、markerA-E.png ファイルにマーカー画像を５つ連続して描いてあります。 shadowMarker.png ファイルは、マーカーの影画像が１つだけです。これを For文でループさせることで、連続して「Ａ」から「Ｅ」までのマーカーを作成しています。

var points = [
  [35.658613, 139.745525, "東京タワー"],
  [35.675888, 139.744858, "国会議事堂"],
  [35.712074, 139.79843, "浅草駅"],
  [35.681382, 139.766084, "東京駅"],
  [35.658517, 139.701334, "渋谷駅"]
];
function initialize() {
  var centerPos = new google.maps.LatLng(35.658613, 139.745525);
  var mapOptions = {
    zoom : 11,
    center : centerPos,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
  for (var i = 0; i < points.length; i++) {
    createMarker(map, points[i][0], points[i][1], points[i][2], i);
  }
}
function createMarker(map, lat, lng, title, iconIdx) {
  var pos = new google.maps.LatLng(lat, lng);
  var image = new google.maps.MarkerImage("markerA-E.png");
  image.size = new google.maps.Size(20, 34);
  image.origin = new google.maps.Point(0, 34 * iconIdx);
  image.anchor = new google.maps.Point(10, 34);
  
  var shadowImage = new google.maps.MarkerImage("markerShadow.png");
  shadowImage.size = new google.maps.Size(37, 34);
  shadowImage.origin = new google.maps.Point(0, 0);
  shadowImage.anchor = new google.maps.Point(10, 34);
  
  var marker = new google.maps.Marker({
    position :  pos,
    map : map,
    title: title,
    icon : image,
    shadow : shadowImage
  });
}

大きな画像の一部をマーカー画像として使うコード

3-3_map.html

「Ａ」から「Ｅ」のマーカーが作成された