Home/ Questions/Q 1098423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:34:38+00:00

I am folowing this example to display tabbed infowindo for google maps : combined

  • 0

I am folowing this example to display tabbed infowindo for google maps:

combined with this

using a static div like this below worked withh no problems:

<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>

but when I was trying doing this:

    <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>

It didnt display like a tabs?? any Error I made?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need a few changes here:

    • When calling .append() you want to append complete elements, you’re appending DOM elements not pieces…so you want to append one complete chunk of HTML like this:

        .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>")

    • If you’re appending you want to call .empty() first, or don’t use .append() and use .html() instead, like this:

        .html("<ul> \
         ....
         <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")

    • You need to create the tabs widget after the elements are created by calling .tabs() on $("#tabs") after the setting the content with .html() call above.

    You may want to play with dimensions and such, but here’s a demo of your current code/markup with the above changes, working, and you can see/edit the code here.

    • 0