将选择元素添加到谷歌地图上

Question

我正在尝试在谷歌地图上添加两个带有多个选项的选择菜单，但我不知道该怎么做。我确实将选择元素放到了文档中，但它不在谷歌地图的顶部。它在文档中创建了一个白条。

理想情况下，我想知道如何使用这些菜单在谷歌地图顶部简单地实现选择菜单：

<select name="buildings" onchange="updateBuild(this.options[this.selectedIndex].value)">
   <option value="armory">The Armory</option>
   <option value="pillsbury">Pillsbury Hall</option>
   <option value="folwell">Folwell Hall</option>
   <option value="jones">Jones Hall</option>
   <option value="statue">Pillsbury Statue</option>
   <option value="wesbrook">Wesbrook Hall</option>
   <option value="nicholson">Nicholson Hall</option>
   <option value="eddy">Eddy Hall</option>
   <option value="music">Music Education</option>
   <option value="wulling">Wulling</option>
</select> 
<select name="transportation", onchange="updateTrans(this.options[this.selectedIndex].value)">
   <option value="driving">Driving</option>
   <option value="walking">Walking</option>
   <option value="bicycling">Bicycling</option>
   <option value="transit">Transit</option>
</select>

Answer 1

您可以将它们添加为map-controls:

function init() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 2,
    noClear: true
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByName('buildings')[0]);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByName('transportation')[0]);
}

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map_canvas">
  <select name="buildings" onchange="updateBuild(this.options[this.selectedIndex].value)">
    <option value="armory">The Armory</option>
    <option value="pillsbury">Pillsbury Hall</option>
    <option value="folwell">Folwell Hall</option>
    <option value="jones">Jones Hall</option>
    <option value="statue">Pillsbury Statue</option>
    <option value="wesbrook">Wesbrook Hall</option>
    <option value="nicholson">Nicholson Hall</option>
    <option value="eddy">Eddy Hall</option>
    <option value="music">Music Education</option>
    <option value="wulling">Wulling</option>
  </select>
  <select name="transportation"  onchange="updateTrans(this.options[this.selectedIndex].value)">
    <option value="driving">Driving</option>
    <option value="walking">Walking</option>
    <option value="bicycling">Bicycling</option>
    <option value="transit">Transit</option>
  </select>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>