Question

I am in the process of creating a Google Maps Mashup.
Everything seems to work fine until I attempt to pass JQuery tabs to my infowindow.
Basically, what I am doing is:

1. Create Map
2. Onclick Event from checkbox
3. Create Marker
4. Create Infowindow
5. Call custom function to generate the HTML for the infowindow (in this custom function, I give the HTML element a unique name)
6. I then try to call the JQuery function to initiate the tabs

This is where the issue arises. I get the javascript error “cannot read property _e3 of undefined”. I did try to call the custom function after creating the infowindow, but this is not helping (although this is where the JS issue arises)

My code is below:

var map;
        var mouseInfowindow;
        var infowindow;
        var bounds;
        var infoWindow = new google.maps.InfoWindow;
        var markers = [];

        function initialize() {
            var myOptions = {
                center: new google.maps.LatLng(-33.924868, 18.424055),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: true,
                zoomControl: true,
                panControl: true,
                mapTypeControl: true,
                zoom: 12,
                zoomControlOptions: { 'style': google.maps.ZoomControlStyle.LARGE, 'position': google.maps.ControlPosition.RIGHT_BOTTOM },
                panControlOptions: { 'style': google.maps.ZoomControlStyle.LARGE, 'position': google.maps.ControlPosition.RIGHT_BOTTOM },
                mapTypeControlOptions: { 'style': google.maps.MapTypeControlStyle.DROPDOWN_MENU, 'position': google.maps.ControlPosition.RIGHT_BOTTOM }
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            devcs = [];

            for (var i = 0; i < unitsArr.length; i++) {
                var unit = unitsArr[i];
                var marker = createMarker(unit[0], unit[1], unit[2], unit[3], unit[4], unit[5]);

                devcs[i] = marker;
                mymarker = marker;

                myLat = unit[2];
                myLng = unit[3];
            }

            //ShowClock();
        }

        function createMarker(a, b, c, d, e, f, g, h , i, j) 
        {

            // Hide the Marker and InfoWindow if the checkbox was unchecked
            if (j.checked == false)
            {
               hideMarker(a);
            } 
            else
            {
                // If the marker was created previously, simply show it (i.e. do not recreate it)
                if (show(a) == '0')
                {
                    // Create new marker that has not already been added to the page
                    var location = new google.maps.LatLng(c, d);
                    var marker = new google.maps.Marker({
                        position: location,
                        icon: e,
                        animation: google.maps.Animation.DROP,
                        map: map,
                        id: a
                        });

                    marker.setTitle(b);
                    map.panTo(location);
                    markers.push(marker);

                    google.maps.event.addListener(marker, 'click', function() {
                        if(infowindow) {
                            infowindow.close();
                        }   

                        var contentString = buildInfoWindowContent(a, b, c, d, e, f);
                        infoWindow.setContent(htmlEscape(contentString));
                        infoWindow.open(map,marker);

                        google.maps.event.addListener(infowindow, 'domready', function () {
                            $("#tab-panel-1234").tabs();
                        });

                    });
                }
             }
        }


        function buildInfoWindowContent(a, b, c, d, e, f)
        {

            var returnString = '<div class="infobox-wrapper">' + 
                               '     <div class="container_12" id="infobox" style="height:240px;overflow-y:auto;">' + 
                               '         <div class="grid_12">' + 
                               '             <div class="block-border" id="tab-panel-1234" style="width:610px;">' + 
                               '                 <div class="block-header">' + 
                               '                     <h1 id="MainTabTitle">' + b + '</h1>' + 
                               '                     <ul class="tabs">' + 
                               '                         <li><a href="#tab-1" id="TabOneHeader">Current</a></li>' + 
                               '                         <li><a href="#tab-2" id="TabTwoHeader">Trails</a></li>' + 
                               '                         <li><a href="#tab-3" id="TabThreeHeader">Download</a></li>' +
                               '                     </ul>' +
                               '                 </div>' +
                               '                 <div class="block-content tab-container" style="padding-top:10px; padding-bottom:10px;">' + 
                               '                     <div id="tab-1" class="tab-content">' + 
                                                        f + 
                               '                     </div>' + 
                               '                     <div id="tab-2" class="tab-content">' + 
                               '                        <table style="width:100%;" cellpadding="4" cellspacing="0">' + 
                               '                          <tr>' + 
                               '                              <td></td>' + 
                               '                              <td></td>' + 
                               '                          </tr>' + 
                               '                          <tr>' + 
                               '                              <td></td>' + 
                               '                              <td></td>' + 
                               '                          </tr>' + 
                               '                        </table>' + 
                               '                     </div>' + 
                               '                     <div id="tab-3" class="tab-content">' + 
                               '                         <p>' + 
                               '                         </p>' + 
                               '                     </div>' + 
                               '                 </div>' + 
                               '             </div>' + 
                               '         </div>' + 
                               '     </div>' + 
                               ' </div> ' ;

                return returnString;

        }

Any help would be greatly appreciated!!

Answer 1

There is a typo, the marked w has to be uppercase:

google.maps.event.addListener(infowindow, 'domready',....
//--------------------------------^