Динамически создавайте похожие элементы управления картами Google Maps в javascript

Question

Я пытаюсь создать элемент управления, подобный элементу управления на картах Google, для отображения различных карт (Карта, Спутник, Ландшафт). По сути, это кнопка типа div, которая при нажатии на нее отображает выпадающий список флажков и кнопку. Я могу создать выпадающий список флажков, но не могу заставить div вести себя так, как этот элемент управления Google Maps. Чего мне не хватает?

Мой список появляется внутри «кнопки», а не под ней.

Вот мой код

function MyControl(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'left';
  controlUI.title = 'Click to show';
  controlDiv.appendChild(controlUI);

  var dropdown = document.createElement('DIV');
  dropdown.style.width = '100px';

  var chkOne = document.createElement( "input" );
  chkOne.type = "checkbox";
  chkOne.id = "chkOne";
  chkOne.value = "One";
  chkOne.checked = false;
  var lblOne = document.createElement('label')
  lblOne.htmlFor = "chkOne";
  lblOne.appendChild(document.createTextNode('One'));

  var chkTwo = document.createElement( "input" );
  chkTwo.type = "checkbox";
  chkTwo.id = "chkTwo";
  chkTwo.value = "Two";
  chkTwo.checked = false;
  var lblTwo = document.createElement('label')
  lblTwo.htmlFor = "chkTwo";
  lblTwo.appendChild(document.createTextNode('Two'));

  var btnDone = document.createElement( "input" );
  btnDone.type = "button";
  btnDone.name = "btnDone";
  btnDone.value = "Done";

  dropdown.appendChild(chkOne);
  dropdown.appendChild(lblOne);
  dropdown.appendChild(document.createElement( "BR" ));
  dropdown.appendChild(chkTwo);
  dropdown.appendChild(lblTwo);
  dropdown.appendChild(document.createElement( "BR" ));
  dropdown.appendChild(btnDone);

  controlUI.appendChild(dropdown);

  google.maps.event.addDomListener(controlUI, 'click', function() {
    dropdown.visible = true;
  });

  btnDone.addEventListener("click", showList, false);  

  function showList() {  
      dropdown.visible = false;
  }  
}


  // Create the DIV to hold the control and call the HomeControl() constructor
  // passing in this DIV.
  var accidentsToShowDiv = document.createElement('DIV');
  // Set CSS for the control border.
  accidentsToShowDiv.style.backgroundColor = 'white';
  accidentsToShowDiv.style.borderStyle = 'solid';
  accidentsToShowDiv.style.borderWidth = '2px';
  accidentsToShowDiv.style.cursor = 'pointer';
  accidentsToShowDiv.style.textAlign = 'left';
  accidentsToShowDiv.title = 'Accidents to Show';

  var homeControl = new MyControl(accidentsToShowDiv, mainMap);

  accidentsToShowDiv.index = 1;
  mainMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(accidentsToShowDiv);

Answer 1

Вы забыли добавить boxshadow

controlUI.style.boxShadow = '0 1px 3px rgba(0,0,0,0.5)';