I'm attempting to dynamically change the background color of an InfoBox by using a Dropdown list (this InfoBox is used to create map labels). I am using google.maps.event.addDomListener, but the values are not returning. Below is my code, can anyone identify where the error lies?
Javascript code that displays Labels:
function displaynameText(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
if (map.getZoom() < 9) return;
FTresponse = response;
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
for(i = 0; i < numRows; i++) {
var name = response.getDataTable().getValue(i, 1);
var nameStr = name.toString()
while (nameStr.length < 5) { nameStr = '0' + nameStr; }
var point = new google.maps.LatLng(
parseFloat(response.getDataTable().getValue(i, 2)),
parseFloat(response.getDataTable().getValue(i, 3)));
labels.push(new InfoBox({
content: nameStr
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,backgroundColor: "#3333FF"
,fontSize: "8pt"
,width: "50px"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,position: point
,closeBoxURL: ""
,isHidden: false
,enableEventPropagation: true
}));
labels[labels.length-1].open(map);
google.maps.event.addDomListener(document.getElementById('label'),
'change', function() {
var selectedLabel = this.value;
InfoBox.set('backgroundColor', selectedLabel);
});
}
Code inside body for Dropdown list:
<select id="label">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
</select>
This is full code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
... (full HTML code here)
</body>
</html>