Google maps search box FOUC-Collection of common programming errors

What is happening is that the element is part of the HTML markup, and is visible on the page also before google maps has finished initalization. It is not an error or even unexpected behavior. You have two options :

1) set the box visibility to hidden :


and show the box as the last thing in initialize()

google.maps.event.addListener(map, 'idle', function() {
  input.style.visibility='visible';
});

see fiddle -> http://jsfiddle.net/xkAaJ/

2) create the input box by code. Remove the markup and replace

var input = /** @type {HTMLInputElement} */( 
      document.getElementById('pac-input'));

in initialize() with

var input = document.createElement('input');
input.id="pac-input";
input.className="controls";
input.type="text";
input.placeholder="Enter a location";

see fiddle -> http://jsfiddle.net/wy6X3/

The code examples is based on the google places example you are refering to in the question.