title: How to populate sidebar information with infowindow data?
body: <p>I have a fully-functioning Google Maps V3 map that works fine the way it is. However, I dislike InfoWindows because they take up too much map space when displaying the info. My solution around that is to place information in a <b>sidebar</b> to the right of the map. The information inside the InfoWindow would be transferred to a  in that sidebar using an event to first clear existing data and then repopulate it with the current data.</p>
  
  <p>I'm not sure how to take data from inside the map and bring it outside, nor how to use an event inside to move that that data outside on a 'click'.</p>
  
  <pre><code>  var infoWindow = new google.maps.InfoWindow;
  
    // Change this depending on the name of your PHP file
    downloadUrl("tests/cfdstationsxml.php", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var city = markers[i].getAttribute("city");
        var state = markers[i].getAttribute("state");
        var zip = markers[i].getAttribute("zip");
        var engine = markers[i].getAttribute("engine");
        var truck = markers[i].getAttribute("truck");
        var ambulance = markers[i].getAttribute("ambulance");
        var special_units = markers[i].getAttribute("special_units");
        var battalion = markers[i].getAttribute("battalion");
        var district = markers[i].getAttribute("district");
        var office = markers[i].getAttribute("office");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "&lt;div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'&gt;&lt;span style='font-weight:500;text-decoration:underline;font-size:13px;'&gt;" + name + "&lt;/span&gt;&lt;br&gt;&lt;span style='font-size:10px;'&gt;" + address + "&lt;br&gt;" + city + ", " + state + " " + zip + "&lt;/span&gt;&lt;br&gt;&lt;table style='color:black;font-size:12;'&gt;&lt;tr&gt;&lt;td&gt;Engine:&lt;/td&gt;&lt;td&gt;" + engine + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Truck:&lt;/td&gt;&lt;td&gt;" + truck + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ambulance:&lt;/td&gt;&lt;td&gt;" + ambulance + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Special Units:&lt;/td&gt;&lt;td&gt;" + special_units + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Battalion:&lt;/td&gt;&lt;td&gt;" + battalion + "&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;District:&lt;/td&gt;&lt;td&gt;" + district + "&lt;/td&gt;&lt;tr&gt;&lt;td&gt;Office:&lt;/td&gt;&lt;td&gt;" + office + "&lt;/td&gt;&lt;/tr&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;";
        var icon = 'http://www.radioman911.com/images/9px_marker.png'; // anywhere from 3px_marker.png to 8px_marker.png
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon,
          title: name,
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }
  function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
      $("#info").appendTo("#sidebar");  
      //infoWindow.setContent(lmth);
      infoWindow.open(map, marker);
    });
  }
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
    request.open('GET', url, true);
    request.send(null);
  }
  function doNothing() {}
  </code></pre>
  
  <p>ANY help at all would be much appreciated - this has been driving me nuts on and off for a month!!</p>
  
  <p>Tim</p>