2012年8月3日金曜日

[Google Maps API V3] 情報ウインドウを出すと上が切れる

Google Maps JavaScript API V3で情報ウィンドウをマーカークリック後に表示するのではなく
マーカーと同時に表示すると情報ウィンドウが表示ウィンドウの上に上がってしまい切れてしまう。

google.maps.event.addDomListener(window, 'load', function() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoWindow = new google.maps.InfoWindow({
    maxWidth: 300,
    content:'<p>メッセージ</p><p>メッセージ</p><p>メッセージ</p>'
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat, lng)
  });

  google.maps.event.addListener(marker1, 'click', function(){
    infoWindow.open(map, marker1);
  });

  google.maps.event.trigger(marker1, 'click');

});

最初上記のようにしていたのだが、

このように情報ウィンドウの上が切れてしまっている。
しかし、マウスでマーカーをクリックするとちゃんと情報ウィンドウが欠けずに表示される。
ならば、ちょっとまってからクリックすればいいのかなと思って

pid = setTimeout(function(){
google.maps.event.trigger(marker1, 'click');
clearTimeout(pid);
},600);

setTimeoutを使って見たら上手く行った。

Pタグを外しても上手く行ったのだが、それはそれで困ってしまうので。

0 件のコメント:

コメントを投稿