带有jQuery切换功能的Google Maps Api v3

Question

I've got a problem with Google Map in a hidden div with jQuery toggle code. 我在使用jQuery切换代码的隐藏div中遇到了Google Map问题。

Here's the live example: http://provaeur.altervista.org/13.11/ 这是实时示例： http : //provaeur.altervista.org/13.11/

When I click several times on the "DOVE" panel ( .dove related to .dovecart , where the map is located), the map acts strangely. 当我在“ DOVE”面板（与地图所在的.dove相关的.dovecart上单击几次时，地图的行为异常。 I found on the internet the event trigger solution (google.maps.event.trigger(map, "resize")), but I can't apply to my situation... Can somebody help me? 我在互联网上找到了事件触发解决方案（google.maps.event.trigger（map，“ resize”）），但我无法适用于我的情况……有人可以帮我吗？

PS: Excuse me for my bad English. PS：对不起，我的英语不好。

FIRTS JS CODE -- Toggle FIRTS JS CODE-切换

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".homecart").hide();
  $(".storiacart").hide();
  $(".dovecart").hide();
  $(".prodotticart").hide();
  $(".contcart").hide();
  //toggle on a single class
  $(".dove").click(function() {
    $(".dovecart").slideToggle(1500);
    $(".storiacart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
  });
});
</script>

--- creating gmaps --- -创建gmap-

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDol1rmSCdasx76c4TH0UkTpO7pdkzhjnw&sensor=false">
</script>
<script>
  var myCenter=new google.maps.LatLng(45.646938,11.301745);
  var marker;
  function initialize() {
    var mapProp = {
      center:myCenter,
      zoom:7,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    marker=new google.maps.Marker({
      position:myCenter,
      animation:google.maps.Animation.BOUNCE,
      icon:'immagini/punt.png'
    });
    marker.setMap(map);
    var infowindow = new google.maps.InfoWindow({
      content:"Veniteci a trovare!"
    });
    /*google.maps.event.trigger(map, "resize");*/
    google.maps.event.addListener(marker,'click',function() {
      map.setZoom(14);
      map.setCenter(marker.getPosition());
      infowindow.open(map,marker);
    });
  }
</script>
<body>
  <div id="wrapper">
    <header id="conthead">
      <div id="headup"></div>
      <nav id="menu">
        <ul>
          <li class="home"><a href="#">Home</a></li>
          <li class="storia"><a href="#">Storia</a></li>
          <li class="dove" onClick="initialize()"><a href="#">Dove...</a></li>
          <li class="prodotti"><a href="#">Prodotti</a></li>
          <li class="contatti"><a href="#">Contatti</a></li>
        </ul>
      </nav>
    </header>
    <section id="cart" class="dovecart">
      <div id="hcart"></div>
      <div id="bodycart">
        <div id="googleMap" style="width:500px;height:300px;"></div>
      </div>
    </section>

Answer 1

I had a look at your souce code. 我看了看你的源代码。 You have multiple $(document).ready(function() s. I have incorporated them into one and added initialize() to apri() along with $(".dovecart").hide(); . 您有多个$(document).ready(function() s。我将它们合并为一个，并将initialize（）与$(".dovecart").hide();一起添加到apri() 。

function apri(){
initialize();
$(".homecart").hide();
$(".dovecart").hide();
$(".homecart").slideToggle(1500);
}

$(document).ready(function()
{
  $(".home").click(function()
  {
    $(".homecart").slideToggle(1500);
$(".storiacart").hide();
    $(".dovecart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
  });
  $(".storia").click(function()
  {
    $(".storiacart").slideToggle(1500);
$(".dovecart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
  });
  $(".dove").click(function()
  {
    $(".dovecart").slideToggle(1500);
$(".storiacart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
    // added 
    initialize();
  });
  $(".prodotti").click(function()
  {
     $(".prodotticart").slideToggle(1500);
 $(".storiacart").hide();
     $(".dovecart").hide();
     $(".contcart").hide();
     $(".homecart").hide();
  });
  $(".contatti").click(function()
  {
    $(".contcart").slideToggle(1500);
$(".storiacart").hide();
    $(".dovecart").hide();
    $(".prodotticart").hide();
    $(".homecart").hide();
  });
});

EDIT 编辑

initialize() added to $(".dove").click(function() initialize()添加到$(".dove").click(function()

带有jQuery切换功能的Google Maps Api v3

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-11-13 17:37:22

带有jQuery切换功能的Google Maps Api v3

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-11-13 17:37:22

解决方案1
0 已采纳 2012-11-13 17:37:22