How do I get the search bar to show up in this Geocoder Google maps api example?

Question

I am referring to this example: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

For some reason my input box appears as a small white square in the top left hand corner of the box, and I can't type anything into it...I've followed the example almost exactly, but for some reason am not getting the same result..

The HTML in my version is

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

and the CSS is

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

The JS is:

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

I've had a look at 'inspect element' and there is an error: Cannot call method 'addDomListener' of undefined (anonymous function)

Answer 1

found it! the problem was this tiny bit of css:

input {display:none}