Teddy,
I figured this one out. Take a look at the following example code:
http://code.google.com/apis/maps/documentation/javascript/examples/control-custom.html
In that code look at this snippet:
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
You can do whatever HTML you'd like in the:
controlText.innerHTML = '<b>Home</b>';
Here's what I did:
controlText.innerHTML = '<form name="detail_form"><select
name="detail_level"
onchange="loadKML(document.detail_form.detail_level.options[document.detail_form.detail_level.selectedIndex].value)">'+
'<option value="0">0</option>'+
'<option value="1">1</option>'+
'<option value="2">2</option>'+
'<option value="3">3</option>'+
'<option value="4">4</option>'+
'</select></form>';
You'll note that I have an onchange listener in there that uses a
loadKML function I defined. That will be the listener for this form,
you'll need to remove this map event listener below that snippet:
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
Hope that helps!
-chief
> I want to create acustomdropdownmenu for the new V3 API.