이 지오 코더 Google지도 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는

01 23,516,

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