使用Google地图时显示div [英] Show div when google map is used

问题描述

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

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

  $（'＃search_map_container'）。click（function（）{
 $（'＃my_div'）。show（）; 
}）; 
  

但它失败。而且它也失败了，因为 .focus（）， .focusin（）， .mouseenter ）或 .change（） events。

putvande：
我的html是一个简单的div：

 < div id ='my_div'style ='display：none;'> 
这是一个测试
< / div> 
  

google map html是由google生成的：

 < div class =search_map_container> 
 
 ... 
 Google地图代码
 ... 
< / div> 
< / div> 
  

对于Bharat Soni：
我的意思是当有人点击谷歌地图或滚动或缩放。 您尝​​试点击的容器没有 id 'search_map_container'，但是 class 'search_map_container'。所以它应该是：

$ p $ $（'。search_map_container'）。click（function（）{
$（' #my_div'）。show（）;
}）;


I'm using google map api in my rails app and I would like to show a div with jquery when someone is using the map.

The map is contained in a div with the id search_map_container so what I tryed

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

But it fail. And it also fail with .focus(), .focusin(), .mouseenter() or .change() events.

For putvande : My html is a simple div :

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

And google map html is generate by 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>

For Bharat Soni : I mean when someone click on google map or scroll or zoom.

解决方案

Your container you try to click on does not have an id 'search_map_container' but a class 'search_map_container'. So it should be :

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

这篇关于使用Google地图时显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！