收听google.maps.InfoWindow类的domready事件

时间:2011-03-24 07:46:11

标签: javascript google-maps

所以,我正在尝试将谷歌地图添加到我的网页。我想在点击地图上的标记时在弹出的气泡中添加一个表单。

API文档说明了domready

  当包含InfoWindow的内容附加到DOM时,会触发事件。如果要动态构建信息窗口内容,可能希望监视此事件。“

我如何收听此事件?

这是documentation

3 个答案:

答案 0 :(得分:20)

我自己刚刚解决了类似的问题。要侦听domready事件,请使用以下语法:

infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
      // whatever you want to do once the DOM is ready
});

答案 1 :(得分:2)

google.maps.event.addListener()事件等待创建infowindow HTML结构' domready'并且在开启infowindow定义的样式之前。

我使用过这个例子:

google.maps.event.addListener(infowindow, 'domready', function() {

   // Reference to the DIV which receives the contents of the infowindow using jQuery
   var iwOuter = $('.gm-style-iw');
   var iwBackground = iwOuter.prev();

   // Remove the background shadow DIV
   iwBackground.children(':nth-child(2)').css({'display' : 'none'});

   // Remove the white background DIV
   iwBackground.children(':nth-child(4)').css({'display' : 'none'});

});

然后

.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}

结果: enter image description here

参考: http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

由于

答案 2 :(得分:0)

var contentString = 'your form here';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"My Form"
});

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