Google maps search box FOUC

Question

When the map is loading the location, e.g. waiting for geolocation access, the search box renders on the edge of the map like this

Anyone know any tricks to stop this ? Either don't show the box at all, or put the box in the map where it should be.

As for code, even the Google example suffers from this problem: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Answer 1

What is happening is that the <input> 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 <input> box visibility to hidden :

<input id="pac-input" class="controls" type="text" 
placeholder="Enter a location" style="visibility: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 <input> 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.