將選擇元素添加到谷歌地圖

Question

我想添加兩個選擇菜單與多個選項到谷歌地圖，但我不知道如何做到這一點。我確實將select元素放到文檔上，但它不在google地圖上。它在文檔上創建了一個白色條。

理想我想知道如何簡單地實現在谷歌地圖通過這些菜單的頂部選擇菜單：

<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>