JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAoIgL2_xWJ70Hf9IZrSLxOxSgRyJfKxvUsUDuKDID09Cb5D0_ORTc0HDfetfRPodl4PRLqj-TRaN0YA&amp;asp=text.js"></script>
<div id="map"></div>
<ul id="list"></ul>

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

CSS

#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; }

JavaScript

$(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());
  }
});