jQuery ui tabs not working inside jQuery ui map (google map V3)

StackOverflow https://stackoverflow.com/questions/18967383

Question

I am stumped. I have this test map who do almost everything right. Except for a working jQuery UI tabs inside the infowindow.

This is the solution in a "ordinary" google map application.

google.maps.event.addListener(infoWindow, 'domready', function() {
$("#tabs").tabs();
});

I am "wrapping" the HTML into the jQuery script. The data is fetched from HTML5 data attributes.

The script for launching the ui tabs is this jQuery("#tabs").tabs(); or $("#tabs").tab. Currently it's placed in the head . It's wrong in this context, due to the timing is wrong. But I got no clue of how to solve this problem. That is how to trigger the ui-tabs script in right time so I get the infowindow I desire.

I appreciate any help in this issue. I have been banging my head for days and searched high and low to no avail.

Here is my page

               <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demokart javascript debug</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link type="text/css" href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" />

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    jQuery(document).ready(function() {
      jQuery("#tabs").tabs();
     });
    </script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/demos/js/demo.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
    </head>
    <body >
          <div id="map_canvas" class="map rounded" style="height:465px;"></div>
        <p>Pre text</p>
          <ul>
            <li id="#tabs" data-gmapping='{"id":"00007","latlng":{"lat":59.756524742079,"lng": 9.99929666519165},"tags":"Company name", "ikon":"some_pointer.gif", "tab1":" tab1   1 all data here", "tab2":"tab 2 all data ", "tab3":"Tab3  all data here"}'>
              <p >One place we want to show </p>
            </li>
            <li class="#tabs" data-gmapping='{"id":"00008","latlng":{"lat":59.17279,"lng": 9.61545},"tags":Another company", "ikon":"some_pointer.gif", "tab1":" 1 all data here", "tab2":"tab 2  all data here", "tab3":"tab 3 all data here"}'>
              <p >Some text about this place </p>
            </li>
          </ul>
     <script type="text/javascript">
     $(function() { 
                    demo.add(function() {  
                        $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                            var self = this;    
                                $("[data-gmapping]").each(function(i,el) {
                                var data = $(el).data('gmapping');
                                self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'icon':data.ikon, 'bounds':true }, function(map,marker) {
                                    $(el).click(function() {
                                        $(marker).triggerEvent('click');
                                    });
                            }).click(function() {                   
                                    var text = [
             '<div id="tabs"><ul><li><a href="#tab-1">Adress</a></li>',
              '<li><a href="#tab-2">Contact</a></li>',
               '<li><a href="#tab-3">Services</a></li></ul>', 
              '<div id="tab-1">',
              '<b>' + data.tab1 + '</b> - ' +  '<BR>', 
              '</div>',  
              '<div id="tab-2">',
              '<b>' + data.tab2 + '<BR>',
                '</div>',
             '<div id="tab-3">',
                   data.tab3  + '<BR>',
              '</div>'
           ].join('');  
                                       self.openInfoWindow({ 'content': text}, this);
    google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})                         });
                            });                     
                        }});
                    }).load();
                });
</script>
    </body>
    </html>
Was it helpful?

Solution

the infoWindow will be stored internally as a property named "iw", you may access it in you your code(as soon as it's initialized) via self.get('iw') .

Add this after the call of self.openInfoWindow() :

google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top