googlemapの情報ウィンドウについて

JavaScriptの知識もなく調べながら作業をしております。
ド素人ですが、よろしくお願いします。

WEB上にgooglemapを表示させて、マーカーと情報ウィンドウを表示させる予定です。
イメージとしては、「http://www.mishima-kankou.com/play/#map_c1」のような感じで、
予めマーカーと情報ウィンドウは表示させておきます。
そこで情報ウィンドウが重なった時に、重なり順を上にしたいと思うのですが可能でしょうか？

マーカーについては、マウスオーバーしたら、ZIndexを大きくすると出来るのですが、
情報ウィンドウのマウスオーバーが分かりません。
サンプルサイトなどがあれば、教えてください。よろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/04/15 17:02

こんにちは

ご存知のように、map APIには関連要素にイベント処理をバインドする方法として、
　event.addListener()
　addDomListener()
などが用意されています。
https://developers.google.com/maps/documentation …

一方で情報ウィンドウに設定されているイベントには、「closeclick」や「position_changed」などしかなく、マウスオーバーは設定されていないようです。
https://developers.google.com/maps/documentation …
それなので、上記のメソッドではマウスオーバーのイベントは取得できないものと考えられます。

ご質問のようなことを実現する方法として思いつくのは、
1）マウスオーバーイベントが設定されているオブジェクトで、情報ウィンドウの代用をする。
　（Data、Marker、Polyline、Polygonなど）
2）情報ウィンドウに対応するDOMを調べて、DOM要素に直接イベントをバインドする。
　（情報ウィンドウは「gm-style-iw」クラスのdiv要素として生成されるようですので…）
といったところでしょうか。

2）はマップの構造をきちんと把握しないといい加減にはできないので、とりあえず、1）の方法で試してみました。
とは言っても、吹き出し状のものをゼロから自作するのも面倒なので、超簡単にテストする材料として、同じgoogleさんのDynamic Iconsを利用させてもらいました。
https://developers.google.com/chart/image/docs/g …
アイコンなので、勢いマップのマーカーを利用することになります。
（両方ともマーカーになってしまうので、なんだか紛らわしいですけど・・・）

※ あくまでも、以下のようなことが可能であることの確認として試しています。
　・情報ウィンドウ以外で情報ウィンドウもどきが表示できる
　・マウスオーバーのイベントが取得できる
※ 実際には、マーカーではなく他のクラスを利用したほうが管理しやすい気がします。
※ 以下、試してみたサンプルです。
　どのような方法が適切かわからないですが、ご参考にでもなれば…
　・情報ウィンドウ（もどき）にマウスオーバーすると、情報ウィンドウが非表示になる。
　・マーカー（本来のマーカー）をクリックすると、情報ウィンドウ（もどき）が表示される。　
※ スクリプト中iconのurl（ｈｔｔｐ～～）が小文字のままだとリンクに変換されてしまうので、一文字目をｈ（全角のh）に変えてありますのでご注意ください。

<div id="map" style="width:600px; height:600px;"></div>


<script type="text/javascript">
var point = new google.maps.LatLng( 35.681, 139.767 );

//　マップ表示
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

//　マーカー表示
var marker = new google.maps.Marker({ map:map, position:point });

//　インフォ(＝マーカーで代用)作成
var info = new google.maps.Marker({
map: map,
position: point,
icon: {
anchor: { x:64, y:128 },
url: "ｈttp://chart.apis.google.com/chart?chst=d_fnote&chld=balloon|2|880000|h|Tokyo Station|"
}
});

//　イベント設定
google.maps.event.addListener(info, "mouseover", function(){ info.setVisible(false);});
google.maps.event.addListener(marker, "click", function(){ info.setVisible(true);});
</script>

この回答へのお礼

す、すごい～♪
やはり通常ではダメなようですね。
代用作、早速試してみます。

お礼日時：2016/04/15 18:05