Google Maps APIにて、テキスト付きのマーカーを表示させる方法はいくつかあります。

1.予めテキスト付きの画像を準備しておく
 最もシンプルな方法です。例えば、検索した結果の10件を番号(1~10)やアルファベット(A~J)で表示させたい場合などはこの方法で良いでしょう。

2.google-maps-utility-library-v3等に登録されているものを利用する(StyledMarkerなど)
 ライブラリの利用はお手軽ですが、出来合いのものを利用する関係上、アイコンデザインが限定されるなど自由度はあまり高くありません。しかも、上のStyledMarkerには位置がずれるバグがあるような・・・。
 なお、探せば他に良いものが見つかる可能性はあります(LabeledMarkerというのが便利そうなのですが、残念ながら現時点ではv3未対応のようです。少しの修正で対応出来そうですが・・・)

3.カスタムオーバーレイを作成してマーカーとして利用する
 近隣の複数マーカーをまとめて1つのアイコンとして表示するライブラリ「MarkerClusterer」はこのスタイルです。多分これが一番正統(?)な方法なんでしょうが、元々が「オーバーレイ」であるオブジェクトをマーカーとして使用することになるので、予期しないトラブルが発生する等いろいろ面倒そうです。

4.GDライブラリを使用して、PHPにてテキスト付き画像を動的に作成する
 この方法ならばマーカーとしての動作が保証されますので(本当か?)、オーバーレイ特有の問題に悩まされることもありません。
以下にサンプルコードを記載します(Google Map以外でも利用出来ます)。

<画像にテキストを付加するphpコード例>

<?php
//--------------------------------------------------------------------------------------------------------------
//  CreateMarker.php
//
//  元画像にテキストを付加して出力します
// ・当プログラムの実行にはGDライブラリがインストールされている必要があります(PHP4.3以降は標準搭載)
//  ・テキスト出力時に使用するTrueTypeフォントが存在していないと正常動作しません
//
//  パラメータ
//    image   :元画像のファイル名(必須)対応画像形式:gif,png,jpg
//    text    :付加するテキスト
//              配列になっている場合、複数行で出力される  例:text[]=Tokyo&text[]=Station
//    color   :テキストの色 RGB値(000000-FFFFF)で指定する 省略時は000000(黒)
//    offsetx :テキストの水平位置(X)調整  省略時は0
//               offsetx設定例 0:画像の左右中央に配置 -5:左右中央より5px左 3:左右中央より3px右
//    offsety :テキストの垂直位置(Y)調整  省略時は0
//               offsety設定例 0:画像の上下中央に配置 -3:上下中央より3px上 1:上下中央より1px下
//    fontsize:テキストのフォントサイズ 省略時は12
//
//--------------------------------------------------------------------------------------------------------------
    extract($_GET);

    //元画像
    if (!isset($image)) {
       exit();
    } else {
       $im = createImg($image);
       if (!$im) {
          exit();
       }
       $imagewidth = imagesx($im);
       $imageheight = imagesy($im);
    }

    //付加文字列
    if (!isset($text)) {
       $text = "";
    }
    if (!is_array($text)) {
       $textarray[0] = $text;
    } else {
       $textarray = $text;
    }

    //テキスト色
    if (!isset($color)) {
       $color = "000000";
    }
    $txtcolor = separateColor($color); //色分解
    if (!$txtcolor) {
       $txtcolor = array_fill(0,3,0);
    }

    //テキスト位置調整
    if (!isset($offsetx) || !is_numeric($offsetx)) {
       $offsetx = 0;
    }
    if (!isset($offsety) || !is_numeric($offsety)) {
       $offsety = 0;
    }

    //フォントサイズ
    if (!isset($fontsize) || !is_numeric($fontsize)) {
       $fontsize = 12;
    }

    //フォントタイプ
    $font = "フォントファイル名(****.ttf)";  //使用するTrueTypeフォント名を指定

    $textwidths = 0;
    $textheights = 0;
    for ($i = 0; $i < count($textarray); $i++) {
       $bbox = imagettfbbox($fontsize, 0, $font, $textarray[$i]) ;
       $textwidth[$i] = $bbox[2]-$bbox[6];
       $textheight[$i] = $bbox[3]-$bbox[7];
       $textheights += $textheight[$i];
       if ($textwidth[$i] > $textwidths) {
          $textwidths = $textwidth[$i];
       }
    }

    $marginx = 4;
    $marginy = 2;

    //文字列が元画像をはみ出してしまう時は文字列分のボックスを作成し元画像と合成
    if ($textwidths > $imagewidth || $textheights > $imageheight) {
       if ($imagewidth > $textwidths) {
           $bgwidth = $imagewidth;
       } else {
           $bgwidth = $textwidths+$marginx;
       }
       if ($imageheight > $textheights) {
           $bgheight = $imageheight;
       } else {
           $bgheight = $textheights+$marginy;
       }
       $bg = imagecreatetruecolor($bgwidth,$bgheight);
       //テキストのバックグラウンド画像を作成(透過色)
       if ($txtcolor[0] > 250 && $txtcolor[1] > 250 && $txtcolor[2] > 250) {
          $bg_color = imagecolorallocate($bg,240,240,240);
       } else {
          $bg_color = imagecolorallocate($bg,255,255,255);
       }
       imagefilledrectangle($bg, 0, 0, $bgwidth, $bgheight, $bg_color);

       //元画像とバックグラウンド画像を合成
       imagecopy($bg,$im,($bgwidth-$imagewidth)/2,($bgheight-$imageheight)/2,0,0,$imagewidth,$imageheight);
       //透過処理
       imagecolortransparent($bg, $bg_color);
       imageantialias($bg,false);
    } else {
       $bgwidth = $imagewidth;
       $bgheight = $imageheight;
       $bg = $im;
    }
    $txt_color = imagecolorallocate($bg,$txtcolor[0],$txtcolor[1],$txtcolor[2]);

    $sy = 0;
    //テキスト付加
    for ($i = 0; $i < count($textarray); $i++) {
       $sy += $textheight[$i];
       $x = intval(($bgwidth - $textwidth[$i]) / 2) + $offsetx;
       $y = intval(($bgheight - $textheights) / 2) + $sy + $offsety;
       imagettftext($bg, $fontsize, 0, $x, $y, $txt_color,$font,$textarray[$i]);
    }

    //出力
    header("Content-type: image/png");
    header("Cache-control: no-cache");
    imagepng($bg);

    //メモリ解放
    imagedestroy($im);
    imagedestroy($bg);
    exit();

   //ファイルから画像作成
   function createImg($imgfile) {
      $ext = substr(strrchr($imgfile,"."),1);
      $img = null;
      switch ($ext) {
         case "gif":
            $img = imagecreatefromgif($imgfile);
            break;
         case "png":
            $img = imagecreatefrompng($imgfile);
            break;
         case "jpg":
         case "jpeg":
            $img = imagecreatefromjpeg($imgfile);
            break;
      }
      return $img;
   }

   //RGB値(000000-FFFFF)をRGB色分解し配列に収納する
   function separateColor($colorstr) {
      switch (strlen($colorstr)) {
         case 6:
            break;
         case 3:
            $colorstr = $colorstr[0].$colorstr[0].$colorstr[1].$colorstr[1].$colorstr[2].$colorstr[2];
            break;
         default:
            return false;
      }
      for ($i = 0; $i <= 2; $i++) {
          $colorarray[$i] = hexdec(substr($colorstr,$i*2,2));
          if (!is_numeric($colorarray[$i])) {
            return false;
          }
      }
      return $colorarray;
   }
?>

※動作条件
 GDライブラリのインストール(PHP4.3以降であれば標準装備)
 文字出力用のTrueTypeフォントを用意して下さい(上記コード68行目で指定)。
サンプル画像
・上記ソースコードのダウンロード(ZIP圧縮)
 CreateMarker.zip

<上記ソースを利用したテキスト付きマーカーMapサンプルソース>

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

  var map;
  var TokyoRacecourse = new google.maps.LatLng(35.662458653794204, 139.48570128784945);
  var Okunitama = new google.maps.LatLng(35.66747066297717, 139.4789904008942);
  var FuchuStation = new google.maps.LatLng(35.6721380859535, 139.48036637411883);
  var HigashifuchuStation = new google.maps.LatLng(35.668924086787655, 139.4951118181782);
  var BubaigawaraStation = new google.maps.LatLng(35.66840329779021, 139.46852442131808);
  var NakagawaraStation = new google.maps.LatLng(35.65962128130494, 139.4578653226929);
  var FuchuMuseum = new google.maps.LatLng(35.67890558237016, 139.49214395390322);
  var KyodonomoriMuseum = new google.maps.LatLng(35.6566443289718, 139.47313513861468);

  var baseZoom = 15; //ズームレベル
  var currentZoom;
  var currentLocation;

  function initialize() {
     if (!currentLocation) {
        currentLocation = FuchuStation;
     }
     if(!currentZoom) {
        currentZoom = baseZoom;
     }
     var myOptions = {
        zoom: currentZoom,
        center: currentLocation,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     setMarker(map,TokyoRacecourse,"icon/l_red.png","000000","東京競馬場",-8,"center","bottom");
     setMarker(map,Okunitama,"icon/l_yellow.png","000066",["大国魂","神社"],-8,"center","bottom");
     setMarker(map,FuchuStation,"icon/train_green.png","ff0000","府中駅",0,"center","middle");
     setMarker(map,HigashifuchuStation,"icon/train_green.png","ff0000","東府中駅",0,"center","middle");
     setMarker(map,BubaigawaraStation,"icon/train_green.png","ff0000","分倍河原駅",0,"center","middle");
     setMarker(map,NakagawaraStation,"icon/train_green.png","ff0000","中河原駅",0,"center","middle");
     setMarker(map,FuchuMuseum,"icon/l_blue.png","33ff33",["府中市","美術館"],-8,"center","bottom");
     setMarker(map,KyodonomoriMuseum,"icon/l_blue.png","33ff33",["郷土の森","博物館"],-8,"center","bottom");

  }

  function setMarker(map, myLocation, myImage, myTextcolor, myText, offsetY, anchorX, anchorY) {

     var strText=""
     var strTitle=""
     if (myText instanceof Array) {
        for (var i = 0; i < myText.length ; i++) {
           strText += "&text[]="+myText[i];
           strTitle += myText[i];
        }
     } else {
        strText="&text="+myText;
        strTitle += myText;
     }

     var image = "CreateMarker.php?image="+myImage+strText+"&color="+myTextcolor+"&fontsize=14&offsety="+offsetY;

     var marker = new google.maps.Marker({
         map: map,
         position: myLocation,
         title: strTitle,
         icon: image,
         zIndex: 1,
         draggable: false
     });
     
     if (anchorX !== "center" || anchorY !== "bottom") {
        adjustMarkerAnchor(marker,image,anchorX,anchorY);
     }

  }

  //マーカーのアンカーを画像の下辺中央(デフォルト)以外にする場合、
  //テキストの付加によって画像のサイズが変更となる
  function adjustMarkerAnchor(marker,image, anchorX, anchorY) {
     var img = new Image();
     img.onload = function(){
        var w = img.width;
        var h = img.height;
        var anchor_x = 0;
        var anchor_y = 0;
        if (anchorX == "center") {
           anchor_x = (w +1) / 2;
        } else if (anchorX == "right") {
           anchor_x = w;
        } else if (!isNaN(anchorX)) {
           anchor_x = Number(anchorX);
        }
        if (anchorY == "middle") {
           anchor_y = (h +1) / 2;
        } else if (anchorY == "bottom") {
           anchor_y = h;
        } else if (!isNaN(anchorY)) {
           anchor_y = Number(anchorY);
        }
        var iconSpot = new google.maps.MarkerImage(image,
            new google.maps.Size(w, h),
            new google.maps.Point(0,0),
            new google.maps.Point(anchor_x, anchor_y)
        );
        marker.setIcon(iconSpot);
     }
     img.src = image;

  }
</script>
</head>

<body onload="initialize()">
  <div style="font-size:12px;"><b><font color="#990000">テキスト入りマーカー サンプル</font></b></div>
  <div id="map_canvas" style="width:100%; height:95%"></div>
</body>
</html>

<スナップショット>
テキスト付きマーカー表示
サンプルMap表示
※当サンプルMapでは、テキストの表示にフリーフォント『たぬき油性マジック』を利用させていただいています。

コメント   

2011年9月23日(金)
企画展「世紀末、美のかたち」を観てきました。
府中市美術館は地元の「ホームミュージアム」なので、もう何十回も足を運んでいます。年間パスポート会員なので観覧料もかかりません。人口25万人程度の市の美術館としてはかなり充実していると思います。多摩地区随一なのではないでしょうか?。府中の魅力の1つです。

府中市美術館

府中市美術館


今回の企画展では、ルネ・ラリックやエミール・ガレ等のガラス工芸品がたくさん展示されていました。正直、ガラス工芸品についてはよく分かりません。「すごく高そうだな」とか「もし、これを一晩預かることになったら、(壊れないか心配で)安眠出来ないだろうなあ」とか思いながら見てました。

私にとってのメインはアルフォンス・ミュシャの作品。昨年、三鷹で開催されたミュシャ展も観覧しましたが、女性を美しく描かせたらミュシャの右に出る者はいないと思います。ポール・ベルトンとかいうミュシャのパチモン・・失礼、19世紀末にミュシャと双璧をなしたポスター画家の作品もあり、特に、両者が描いた当時の大女優「サラ・ベルナール」の作品展示の試み(競作的意図?)は面白かったです。

ルドンの不思議な絵の数々も見ることが出来ます。オルセー美術館所有の代表作「目を閉じて」と同じ構図の作品も展示されていました。オルセーの絵の下絵なのか、あるいは連作なのかは分かりませんが、色合いなどはむしろ今回展示作品の方がいいのではないかと個人的には思います。

モーリス・ドニの優しいタッチの絵には癒されます。現在、損保ジャパン東郷青児美術館で開催中のモーリス・ドニ展に行きたくなりました。

ガラス工芸品に興味がない私にとって今回の企画展は「わざわざ往復に時間をかけて観覧しに行く」程のものではありませんでしたが、気分転換に散歩がてら見に行く分にはとても有意義なものでした。会期は11月23日まであるので、もう1回くらい行くかもしれません。

コメント   

「第1回白馬国際トレイルラン」に参加のため、高速バスで遠征してきました。
絶滅危惧種(ハクバサンショウウオ)への配慮の関係で距離が50kmから43kmへ短縮になってしまったことは何とも残念ですが、スタッフの方々の並々ならぬ熱意が伝わってくる良い大会でした。
距離的には北丹沢12時間山岳耐久レース(北丹)と似たようなものですが、北丹よりも遥かに楽なコース設定で、本格嗜好(?)のトレイルランナーにとっては物足りないものだったかもしれませんが、個人的には素晴らしいコースだと思いました。
スキー場のゲレンデの上り下り、眺望の良い丘、川沿い、森の中、吊り橋、稲穂の実った田んぼの脇etc・・・と景色が次々と変わり飽きることがありません。コース設定にあたっての詳しいプロセスは分かりませんが「白馬の自然を満喫してもらいたい」といったスタッフの思いが伝わってくるようです。かなり試行錯誤されたのではないかと思います。
当コースは「体力の限界に挑み、克服した満足感を得る」というようなタイプではなく「自然の中を疾走する楽しさを感じる」タイプだと思います(もちろんランナーによって意見は異なるでしょうが・・・)。とにかく走っていて気持ち良かったです。
初開催となる今回の参加者は700名程。定員は1600名でしたので期待していた程の参加者は得られなかったということでしょうか?。この時期は類似したレースがたくさんあり差別化を図るのは難しいかもしれませんが、今後の成功・発展を願ってやみません。

スタート前

スタート前


ジャンプ台

「フナキ~」(by原田)でお馴染みのジャンプ台


ゲレンデの上り

ゲレンデを登っていきます。まだまだ序盤、楽勝です。


岩岳

岩岳中腹からの眺望


岩岳山頂付近

岩岳山頂付近

夏には百合の花が咲き乱れるそうなのですが、残念ながら既に枯れてしまっていました。


森の中

この日は暑かったのですが、森の中は少し涼しく感じました。


刈り入れ間近の田んぼ

刈り入れ間近の田んぼ


渓流

渓流


吊り橋

吊り橋

コメント   

カスタムオーバーレイはOverlayの名前の通り、元々地図上に画像を重ねることを主目的として用意されたもののようで、マーカーの代替としてイベント発生を前提として使用しようとするとハードルが各所に待ち構えています。

以下は、クリックすると背景の色が変わるカスタムオーバーレイを配置した例です。このイベント自体は問題なく実行されるのですが、その下にあるマーカーの位置でクリックするとマーカーイベント(下の例ではメッセージ表示)まで発生してしまいます。

カスタムオーバーレイのイベント発生時の問題スナップショット1

クリックすると背景の色が変わるものの・・・

カスタムオーバーレイのイベント発生時の問題スナップショット1

下にあるマーカーのイベントも発生してしまいます

上のMapを表示

この問題を解消するには、次のようなコードを追加して「イベントの伝搬」を防ぐ必要があります。

  (カスタムオーバーレイクラス名).prototype.stopEvent_ = function() {

     //click以外のイベント伝搬も止めるため配列で処理
     var events = ["click", "dblclick", "rightclick", "mousedown",
         "mouseup", "mousemove", "mouseover", "mouseout",
         "dragstart", "dragend", "contextmenu"];
     var that = this.div_;  //this.div_はコンストラクタで定義されている要素
     for (var i = 0, event; event = events[i]; i++) {
        google.maps.event.addDomListener(that, event, function(e) {
           e.cancelBubble = true;      //IE
           if (e.stopPropagation) {
              e.stopPropagation();     //Firefox
           }
        })
     }
  };

この関数を、クラスのonAddイベント時等に呼び出せば、上記例のようなイベント伝搬は防止出来ます。上記コードではclickだけでなくmousemoveやdblclickのイベント伝搬も止めているため、オーバーレイのダブルクリックでズームインしてしまう(GoogleMapのダブルクリック時の標準機能)こともなくなります。もちろん、これらのイベントが停止されるのは「対象オーバーレイの下」に限られますので、マーカークリック等の機能が無効になってしまうわけではありません。
イベント伝搬防止処理を組み込んだMapを表示

コメント   

前記事「カスタムオーバーレイのイベントが発生しない問題」の関連でいろいろ調べている際に、「GoogleMapsAPI上の要素のzIndexは最大でどのくらいに設定されているのだろう?」と気になったので、以下のようなコードを使い調査してみました(コードを使用しなくともFirebug等で分かるのですが・・・)。

  function get_highest_zIndex(tagname) {
     if (!tagname) { 
        tagname = "*";
     };
     var highestzIndex = 0;
     var elem = document.getElementsByTagName(tagname);
     var elemlist ="";
     var zIndex;
     for(var i = 0; i < elem.length; i++){
        zIndex = elem[i].style.zIndex;
        if (zIndex) {
           zIndex -= 0;
           if (zIndex > highestzIndex) {
              highestzIndex = zIndex;
           }
        }
     }
     return highestzIndex;
  }

GoogleMapsのオブジェクトは全てDIVタグで括られているようなので、get_highest_zIndex(”div”)でzIndexの最大値が分かります。
その結果、現APIバージョン(3.6)では1000001でした。
・zIndex確認サンプル表示(v3.6)
ついでにver3.5の最大値も調べてみた所、1000でした。
・zIndex確認サンプル表示(v3.5)
v3.5からv3.6へのバージョンアップで一気に値が大きくなったようです。
ちなみにzIndex=1000001のオブジェクトはマップ右下に表示される「地図データ ©2011 ZENRIN・・・」の部分です。次に大きいのは左下のGoogleのロゴ(zIndex=1000000)です。
v3.5では前者のzIndex=1000、後者はzIndex=12なので、何か不具合が見つかり、「絶対にこれらのオブジェクトが隠されることがないように」との主旨での変更なのかもしれません(詳細は不明)。
ただ、仮にマーカーやカスタムオーバーレイのzIndexを1000002などに設定しても、上記2つよりも上に配置されることはありませんので(zIndexの大小よりもMapPanesの方が優先されます)、利用者にはあまり関係ない問題だと思います。

コメント   

私も直面した問題なのですが、ある日からGoogle Maps APIのカスタムオーバーレイのクリック等のイベントが発生しなくなってしまうというトラブルがあります。
Google Maps上には目には見えなくても、いくつかのレイヤが存在しているようで、トラブルの原因はAPIのバージョンアップの際にこのレイヤの仕様が変わった?せいなのか、カスタムオーバーレイのイベントが上層に配置された「何か」によってブロックされてしまっているのではないかと推測されます(確証はありませんが)。

以下は、クリック時にメッセージを表示するだけのシンプルなカスタムオーバーレイ例ですが、現時点(2011.9)ではFirefox及びChromeでイベント発生しません(何故かIEでは正常動作します)。

  var map;
  var TokyoTower = new google.maps.LatLng(35.658586468598045, 139.74545106652374);
  var TokyoSkyTree = new google.maps.LatLng(35.71021248831981, 139.81070321307948);
  var TokyoStation = new google.maps.LatLng(35.681232457560355, 139.76718839512637);
  var baseZoom = 12; //ズームレベル
  var currentZoom;
  var currentLocation;

  function initialize() {
     if (!currentLocation) {
        currentLocation = TokyoStation;
     }
     if(!currentZoom) {
        currentZoom = baseZoom;
     }
     var myOptions = {
        zoom: currentZoom,
        center: currentLocation,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     var customOverlay1 = new myTextBox(map,TokyoTower,"東京タワー")
     var customOverlay2 = new myTextBox(map,TokyoSkyTree,"東京スカイツリー")
  }

  function myTextBox(map, myLocation, myTxt) {
     this.lat_ = myLocation.lat();
     this.lng_ = myLocation.lng();
     this.txt_ = myTxt;
     this.setMap(map);
  }

  myTextBox.prototype = new google.maps.OverlayView();

  myTextBox.prototype.onAdd = function() {
     if (!this.div_) {
        this.div_ = document.createElement( "div" );
        this.div_.style.position = "absolute";
        this.div_.style.fontSize = "10px";
        this.div_.style.width = 90;
        this.div_.style.textAlign = 'center';
        this.div_.style.display = 'inline';
        this.div_.style.backgroundColor = '#ffcc99';
        this.div_.style.padding = "8px 0px";
        this.div_.style.border = "2px solid #000066";
        this.div_.innerHTML = this.txt_;
        var panes = this.getPanes();
        panes.overlayLayer.appendChild(this.div_);
     }
  }

  myTextBox.prototype.draw = function() {
     var point = this.getProjection().fromLatLngToDivPixel( new google.maps.LatLng( this.lat_, this.lng_ ) );
     this.div_.style.left = (point.x - (this.div_.offsetWidth / 2)) + 'px';
     this.div_.style.top = (point.y - (this.div_.offsetHeight / 2)) + 'px';
     var that = this;
     google.maps.event.addDomListener(that.div_, "click", function() {
         alert("クリックしました : "+that.txt_);
     });
  }

  myTextBox.prototype.remove = function() {
     if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
     }
  }
カスタムオーバーレイ イベントテスト1
【Sample1】カスタムオーバーレイ イベントテスト1
※クリックしてもメッセージが出ません(Firefox、Chrome)
Sample1のMapを表示

この対策のひとつとして、カスタムオーバーレイのzIndexを大きい値に設定するという方法があります。
上記コードの49行目の下に
  panes.overlayLayer.style[‘zIndex’]=104;
の記述を加えることで動作するようになります(2011/9時点。zIndex=103では動作しないので、ここが境界と思われます)。
しかし、GoogleMapsAPIではバージョンの変遷と共に隠れた要素のzIndexが突然大きな値になったりしているようなので(別記事で記載予定)、この方法では再び動作しなくなる可能性があり、かといってカスタムオーバーレイのzIndexをあまり大きな値に設定してしまうと他の弊害が発生なんていうリスクも無きにしも非ず・・・。
そこで、いろいろ調べた所・・・公式のGoogle Maps JavaScript API V3 リファレンスにきちんと記載されていました。
これによればカスタムオーバーレイを配置するレイヤは以下の7段階から選べるようです(数値が大きい方が上になる)
・ペイン0:mapPane
・ペイン1:overlayLayer
・ペイン2:overlayShadow
・ペイン3:overlayImage
・ペイン4:floatShadow
・ペイン5:overlayMouseTarget
・ペイン6:floatPane
上記コードではoverlayLayerに配置しているので(49行目)下から2つめということになります。
Google公式ページのカスタムオーバーレイの説明の記載がoverlayLayerになっているので、そのまま流用して当レイヤにに配置している人が割と多いようですが、このレイヤはMap上に古地図を重ねる際などに配置させるべきでイベント発生向きではないようです。
ということで、上記コードの49行目を
  panes.floatPane.appendChild(this.div_);
と最上層のfloatPaneに変更することで、無事動作するようになりました。※ペイン3(overlayImage)以上であれば動作します。

カスタムオーバーレイ イベントテスト2
【Sample2】カスタムオーバーレイ イベントテスト2
Sample2のMapを表示

しかし、カスタムオーバーレイには他にも問題があり、使い方が難しいです・・・

来週末に登る予定の白馬岳にある大雪渓は日本三大雪渓のひとつらしいので(後の2つは針ノ木岳と剱岳)、その対策として購入。
冬山に登るわけではないので、コンパクトで着脱の簡単な4本爪バックル式の簡易アイゼンにしました。

4本爪アイゼン

4本爪アイゼン(バックル式)

好天を望む!

コメント   

2011年8月28日(日)
松本に立ち寄った際に松本市美術館を訪問しました。
下調べをせずに訪問したので知らなかったのですが、松本は草間彌生の出身地とのことで、入口から彌生ワールド全開の水玉オブジェの出迎えに衝撃を受けました。

松本市美術館

松本市美術館

幻の華

草間彌生作オブジェ「幻の華」

この日は土門拳の企画展が開催中でしたが、写真には全く興味がないのでこれはパス。常設展のみを閲覧しました(観覧料¥400)。

常設展の目玉はやはり草間彌生の作品です。お馴染みの「かぼちゃ」を始め、「らしい!」作品の数々を堪能しました。
その他にも石井柏亭、河越虎之進、宮坂勝、横地康國など松本(信州)ゆかりの画家の作品が展示されていました。名前も知らない画家がほとんどでしたが、これは単に私が勉強不足なだけで、作品そのものの質は高いと感じました。地に足のついたコレクションで、中途半端に著名な海外の画家の作品を数点展示するよりもずっと良いです。

訪問がちょうどお昼時だったため、館内のレストラン「サンチーム」でランチをいただきました。大きな期待はしていませんでしたが結構美味しかったです。ただ、前菜の「信州産サーモンのマリネ」というのが謎。海なし県なのにサーモン?

ミュージアムショップでは、草間彌生デザインの絵皿が気に入ってしまい、思わず衝動買い。特にファンという訳でもなかったはずなのですが・・・。

草間彌生デザイン絵皿

草間彌生デザイン絵皿(¥9,450)

松本駅までは歩いても10分程ですが、草間彌生デザインバス「水玉乱舞号」が運行しているとの情報を得たので、せっかくなのでこれに乗って帰りました。

草間彌生デザインバス

草間彌生デザインのバス ナンバーも841(ヤヨイ)です!

コメント