tab jquery div dans google maps?

Je folowing this example to display tabbed infowindo for google maps:tab jquery div dans google maps?

utilisant un div statique comme ceci ci-dessous travaillé withh aucun problème:

<div id="tabs" class="tabs" style="display:none;"> 
     <ul > 
     <li><a href='#tabs-1'>First</a></li> 
     <li><a href='#tabs-2'>Second</a></li 
     ><li><a href='#tabs-3'>Third</a></li> 
     </ul> 
     <div id='tabs-1'><h2>First</h2><p>Test</p></div> 
     <div id='tabs-2'><h2>Second</h2><p>Test</p></div> 
     <div id='tabs-3'><h2>Third</h2><p>Decription.</p></div> 
    </div>

mais quand je tentais de faire ceci:

<html> 
    <head> 
     <title>Google Maps and jQuery</title> 

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAqZ_ITen_KJ5-KVdfyDOyoxR6BN8oWcJUlJGhIhjI1wReSYsY0hS2OV_Hx5AMbcOdbgiA0CKKbRMrIw" type="text/javascript"></script> 
    <link href="menu/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="menu/jquery.ui.core.js" type="text/javascript"></script> 
    <script src="menu/jquery.ui.widget.js" type="text/javascript"></script> 
    <script src="menu/jquery.tabs.js" type="text/javascript"></script> 
    <link href="menu/demos.css" rel="stylesheet" type="text/css" /> 


     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       var map = new GMap2($("#map").get(0)); 
       var burnsvilleMN = new GLatLng(44.797916, -93.278046); 
       map.setCenter(burnsvilleMN, 8); 

       var bounds = map.getBounds(); 
       var southWest = bounds.getSouthWest(); 
       var northEast = bounds.getNorthEast(); 
       var lngSpan = northEast.lng() - southWest.lng(); 
       var latSpan = northEast.lat() - southWest.lat(); 
       var markers = []; 
       for (var i = 0; i < 10; i++) { 
        var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
         southWest.lng() + lngSpan * Math.random()); 
        marker = new GMarker(point); 
        map.addOverlay(marker); 
        markers[i] = marker; 
       } 
       $(markers).each(function (i, marker) { 
        $("<li />") 
         .html("Point " + i) 
         .click(function() { 
          displayPoint(marker, i); 
         }) 
         .appendTo("#list"); 

        GEvent.addListener(marker, "click", function() { 
         displayPoint(marker, i); 
        }); 
       }); 

       $("#tabs").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 

       function displayPoint(marker, index) { 
        $("#tabs").hide();  
        var moveEnd = GEvent.addListener(map, "moveend", function() { 
         var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 
         $("#tabs") 
         .append("<ul>") 
         .append("<li><a href='#tabs-1'>First</a></li>") 
         .append("<li><a href='#tabs-2'>First</a></li>") 
         .append("<li><a href='#tabs-3'>First</a></li>") 
         .append("</ul>") 
         .append("<div id='tabs-1'><h2>First</h2><p>TEST</p></div>") 
         .append("<div id='tabs-2'><h2>First</h2><p>TEST</p></div>") 
         .append("<div id='tabs-3'><h2>First</h2><p>TEST</p></div>") 
         .fadeIn() 
         .css({ top: markerOffset.y, left: markerOffset.x }); 


         GEvent.removeListener(moveEnd); 
        }); 
        map.panTo(marker.getLatLng()); 
       } 
      }); 

      $(function() { 
       $("#tabs").tabs(); 
      }); 


     </script> 
     <style type="text/css" media="screen"> 
      #map { float:left; width:500px; height:500px; } 
      #tabs { position:absolute; padding:10px; background:#555; color:#fff; width:250px; } 
      #list { float:left; width:200px; background:#eee; list-style:none; padding:0; } 
      #list li { padding:10px; } 
      #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
     <ul id="list"></ul> 

     <div id="tabs" class="tabs" style="display:none;"> 
    </div> 
    </body> 
</html>

Il n'a pas montré comme des onglets ?? une erreur j'ai fait?

Merci

Source

2010-08-25 Bart

Avec tout ce code, il serait vraiment utile si vous pouviez fournir un lien vers une démo en direct. –

Pourriez-vous nous donner un meilleur exemple? http://jsfiddle.net/SeGWs/ – Incognito

Vous devez quelques changements ici:

Lorsque vous appelez .append() vous voulez ajouter des éléments complets, vous annexant éléments DOM pas de pièces ... alors vous voulez ajouter un morceau complet de HTML comme ceci:

.append("<ul> \ 
      <li><a href='#tabs-1'>First</a></li> \ 
      <li><a href='#tabs-2'>Second</a></li> \ 
      <li><a href='#tabs-3'>Third</a></li> \ 
      </ul> \ 
      <div id='tabs-1'><h2>First</h2><p>TEST</p></div> \ 
      <div id='tabs-2'><h2>Second</h2><p>TEST</p></div> \ 
      <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")

Si vous êtes annexant que vous voulez appeler .empty() d'abord, ou ne pas utiliser .append() et utiliser .html() à la place, comme ceci:
```
.html("<ul> \ 
     .... 
     <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>") 
```
Vous devez créer le widget onglets après que les éléments sont créés en appelant .tabs() sur $("#tabs") après le réglage du contenu avec .html() appel ci-dessus.

Vous pouvez jouer avec des dimensions et ce, but here's a demo of your current code/markup with the above changes, working et you can see/edit the code here.

Source

2010-09-25 15:05:43

dans cette démo, la première fois que cela fonctionne, puis si je clique sur le second point, ça ne marche pas, va .empty() faire l'affaire? – Bart

@sam - Oops bonne prise, vous devez détruire le widget précédent, j'ai mis à jour les deux démos afin que vous puissiez voir comment faire cela. –

tab jquery div dans google maps?

Répondre

Questions connexes