google maps updating div with info window event on map and sidebar - google-maps

Question

I am using the following code to display my map plus 2 seperate div. One has a list of features (sidebar) and one has the result of the infowindow click event.
I can get the expected behavior when I click on the map, but the sidebar features, while correctly label on the map, do not update the "BottomInfoWindow" DIV. I cannot seem to get the right place to make that happen. On a less related note, I also would like to show the fusion table card in the "BottomInfoWindow" DIV, but haven't figured out how to incorporate that into a google map. If you know of an example that would be great too.
<style type="text/css">
html, body, #map_canvas {
width: 900px;
height: 550px;
margin: 0;
padding: 0;
}
.infowindow * {font-size: 90%; margin: 0}
.auto-style1 {
font-size: small;
}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize -->
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var tableId ='1aa5D73bkLrD6aY7W7MaU5C4z-v6HRM6aWnhg19N5';
function createSidebar() {
//set the query using the parameter
var queryText = encodeURIComponent("http://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM "+tableId);
var query = new google.visualization.Query(queryText);
var queryText = encodeURIComponent("SELECT 'Sample Location', 'X', 'Y' FROM "+tableId);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(getData);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(createSidebar);</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
//concatenate the results into a string, you can build a table here
fusiontabledata = "<table><tr>";
// for(i = 0; i < numCols; i++) {
fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>";
// }
fusiontabledata += "</tr><tr>";
for(i = 0; i < numRows; i++) {
// for(j = 0; j < numCols; j++) {
fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 0) + "</a></td>";
// }
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>"
//display the results on the page
document.getElementById('sidebar').innerHTML = fusiontabledata;
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
}
function myFTclick(row) {
//var description = FTresponse.getDataTable().getValue(row,0);
var name = FTresponse.getDataTable().getValue(row,0);
var lat = FTresponse.getDataTable().getValue(row,2);
var lng = FTresponse.getDataTable().getValue(row,1);
var position = new google.maps.LatLng(lat, lng);
openInfoWindow(name, position);
}
function openInfoWindow(name, position) {
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: '<div class="FT_infowindow"><h3>' + name +
'</h3></div>',
pixelOffset: new google.maps.Size(0, 2),
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
}
var map = null;
var infoWindow = null;
function initialize() {
//SET CENTER
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(47.68635054275792, -117.21382726097107),
zoom: 16,
scrollwheel:false,
mapTypeControl: true,
streetViewControl: false,
overviewMapControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
// CONTROLS
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: 'hybrid'
});
layer = new google.maps.FusionTablesLayer({suppressInfoWindows: true,
query: { from: tableId, select: 'Y, X'}});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event) {
infoWindow.close();
// alert("click:"+event.latLng+","+event.infoWindowHtml);
openInfoWindow(event.row["Sample Location"].value, event.latLng);
// infoWindow.setContent(event.infoWindowHtml);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
});
infoWindow = new google.maps.InfoWindow();
// createSidebar();
}
</script>
</head>
<body onload="initialize()">
<table style="width:100%;"><tr><td>
<div id="map_canvas">
</div>
</td><td>
<div id="sidebar" style="width:120px;height:550px; overflow:auto" class="auto-style1">
</div>
</td></tr>
<tr><td colspan="2">
<div id="BottomInfoWindow" class="auto-style1">
Result
</div>
</td></tr>
</table>

Answer 1

I get a javascript error Uncaught TypeError: Cannot read property 'infoWindowHtml' of undefined in the posted code on this line:
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
There is no event inside the getData function
If you want to use the code that exists, add that to openInfoWindow()
function openInfoWindow(name, position) {
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: '<div class="FT_infowindow"><h3>' + name +
'</h3></div>',
pixelOffset: new google.maps.Size(0, 2),
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
}
proof of concept fiddle
Note that the infoWindowHtml defined by the fusionTable (what your click listener is displaying in the "BottomInfoWindow" DIV) is not accessible from the sidebar, but you can recreate it in the openInfoWindow function.
To make them both the same (formated by the openInfoWindow function) change the fusionTablesLayer "click" handler as well:
google.maps.event.addListener(layer, "click", function (event) {
infoWindow.close();
// alert("click:"+event.latLng+","+event.infoWindowHtml);
openInfoWindow(event.row["Sample Location"].value, event.latLng);
// infoWindow.setContent(event.infoWindowHtml);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
});