Question

我在我的rails应用程序中使用google map api，当有人使用地图时，我想用jquery显示div。

地图包含在id为search_map_container的div中，所以我尝试了

$('#search_map_container').click(function() {
    $('#my_div').show();
});

但它失败了。它也会因.focus()，.focusin()，.mouseenter()或.change()事件而失败。

对于putvande：我的HTML是一个简单的div：

<div id='my_div' style='display:none;'>
    This is a test
</div>

google地图html由google生成：

<div class="search_map_container"> 
  <div id="search_map" class="gmaps4rails_map" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
  ...
  Google map code
  ...
  </div>
</div>

对于Bharat Soni：我的意思是当有人点击谷歌地图或滚动或缩放。

Answer 1

您尝试点击的容器没有id'search_map_container'，而是class'search_map_container'。所以它应该是：

$('.search_map_container').click(function() {
    $('#my_div').show();
});

Answer 2

您也可以使用Google地图事件监听器执行此操作：

google.maps.event.addListener(map, 'center_changed', function() {
  $('#my_div').show();
});


google.maps.event.addListener(map, 'click', function() {
  $('#my_div').show();
});

google.maps.event.addListener(map, 'zoom_changed', function() {
   $('#my_div').show();
});

见这里： http://jsfiddle.net/RSBgP/

使用谷歌地图时显示div

2 个答案: