$(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").filter(".ui-tabs").tabs("destroy").end() .html("<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>") .tabs() .fadeIn() .css({ top: markerOffset.y, left: markerOffset.x }); GEvent.removeListener(moveEnd); }); map.panTo(marker.getLatLng()); } });