3-4.マーカー画像のクリックできる範囲を指定する

　Google Maps API v3 の MarkerImage クラスにはshape というプロパティがあります。 これはマーカー画像のどの位置をクリックできる範囲として認識するか指定するためのプロパティです。 shape プロパティには、「typeプロパティ」と「coordプロパティ」を持つJavaScriptオブジェクトを渡します。 coord プロパティには、イメージマップ (x,y順) を配列として追加します。 type プロパティには、 "poly"という文字列を指定します。

　例として大きくて分かりやすい画像で、日本の国旗を作ってみました。 国旗の部分のみクリックできるようにするには、下図の4つの座標点のX/Y座標を順に配列に指定します。

flagJapan.png ファイル

var flagShape = {
  type : "poly",
  shape : [10, 12, 10, 65, 91, 65, 91, 12]
};

　実際のコードは次のようになります。

function initialize() {
  var centerPos = new google.maps.LatLng(35.675888, 139.744858);
  var mapOptions = {
    zoom : 11,
    center : centerPos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
  createMarker(map, centerPos);
}
function createMarker(map, pos) {        
  var image = new google.maps.MarkerImage("img/flagJapan.png");
  image.size = new google.maps.Size(91, 98);
  image.origin = new google.maps.Point(0, 0);
  image.anchor = new google.maps.Point(6, 98);
  
  var flagShape = {
    type : "poly",
    coord : [10, 12, 10, 65, 91, 65, 91, 12]
  };
  
  var marker = new google.maps.Marker({
    position : pos,
    map : map,
    icon : image,
    shape : flagShape
  });
}

マーカー画像の一部だけをクリックできる範囲に指定するコード
3-4_map.html

日本の国旗上にマウスカーソルを合わせると、カーソルの形が変わる