如何讓搜索欄顯示在此Geocoder Google maps api示例中？

Question

我指的這個例子：https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

出於某種原因，我的輸入框顯示爲框的左上角一個白色的小廣場上，我不能輸入任何內容到它...我已經跟着例子幾乎一模一樣，但由於某些原因無法得到相同的結果..

的HTML在我的版本是

<div class="map myboardmap"> 
    <div id="panel"> 
    <input id="address" type="textbox" value="Sydney, NSW"></input> 
    <input type="button" value="Geocode" onclick="codeAddress()"></input> 
    </div> 
<div id="myboardmap_canvas"></div> 

和CSS是

#panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
} 

#myboardmap_canvas{ 
width:400px; 
height:300px; 
background:#000; 
border-radius:20px; 
-moz-border-radius:20px; 
-webkit-border-radius:20px; 

-moz-box-shadow:5px 5px 7px rgba(33,33,33,1); 
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); 
    box-shadow: 5px 5px 7px rgba(33,33,33,.7); 
} 

.map{ 
z-index:1; 
display:block; 
position: absolute; 

-moz-transition:-moz-transform .15s linear; 
-o-transition:-o-transform .15s linear; 
-webkit-transition:-webkit-transform .15s linear; 

border-radius:20px; 
-moz-border-radius:20px; 
-webkit-border-radius:20px; 
} 

.myboardmap{ 
z-index:1; 
top:30px; 
left:500px; 

    -o-transform:rotate(3deg); 
    -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
} 

的JS是：

var geocoder; 
var myboardmap; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(51.5072, -0.1275); 
    var mapOptions = { 
     zoom: 8, 
     center: latlng 
    } 
    myboardmap = new google.maps.Map(document.getElementById('myboardmap_canvas'), mapOptions); 

    ... 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: myboardmap, 
       position: results[0].geometry.location 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

... 

google.maps.event.addDomListener(window, 'load', initialize); 

我有一個看看「檢查元素」，並有一個錯誤：無法調用未定義（匿名函數）的方法「addDomListener」

Answer 1

找到了！問題是這個小小的css：

input {display:none}