How to populate sidebar information with infowindow data? - google-maps-api-3

Question

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 sidebar 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.
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'.
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 < 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 = "<div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'><span style='font-weight:500;text-decoration:underline;font-size:13px;'>" + name + "</span><br><span style='font-size:10px;'>" + address + "<br>" + city + ", " + state + " " + zip + "</span><br><table style='color:black;font-size:12;'><tr><td>Engine:</td><td>" + engine + "</td></tr><tr><td>Truck:</td><td>" + truck + "</td></tr><tr><td>Ambulance:</td><td>" + ambulance + "</td></tr><tr><td>Special Units:</td><td>" + special_units + "</td></tr><tr><td>Battalion:</td><td>" + battalion + "</td></tr><tr><td>District:</td><td>" + district + "</td><tr><td>Office:</td><td>" + office + "</td></tr></tr></table></div>";
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() {}
ANY help at all would be much appreciated - this has been driving me nuts on and off for a month!!
Tim

Answer 1

This should work for the correct value of 'id of your sidebar div';
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('id of your sidebar div').innerHTML = html;
});
}
working example