Question

I use a custom control for my maps application. It works fine with FF, Safari, Chrome and IE9, but on IE8 or IE7 it seems, that the change event is not fired? Whats wrong here:

function bf_mapstyle_Control(controlDiv, map) {

  controlDiv.style.paddingTop = '5px';
  controlDiv.style.paddingRight = '20px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.innerHTML = '<select id="select_mapstyle" style="font-family: Verdana,Arial,sans-serif; font-size : 12px; border: 1px solid #D8D8D8;border-radius: 3px; padding: 5px;">' + 
              '<option value="0">Google Karte</option>' +
              '<option value="1">Google Satellit</option>' +
              '<option value="2" selected>OpenStreetMap</option>' +
              '<option value="3">OpenCyleMap</option></select>';
  controlUI.appendChild(controlText);
  google.maps.event.addDomListener(controlUI, 'change', function() {
        var tid = document.getElementById('select_mapstyle').value;
        changeMapType(tid);
  });

};

function changeMapType(inType){
    switch (inType){
        case '0' : map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
                 break;
        case '1' : map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                 break;
        case '2' : map.setMapTypeId('OSM');
                 break;
        case '3' : map.setMapTypeId('OSM Cycle');
                 break;
    }
}

Answer 1

The “change” event doesn’t bubble up the DOM in IE. (It might in IE9 I guess.) You’ll have to put the event handler on the <select> element itself.