Google отображает окно поиска за пределами карты

Я играю с API Карт Google, и я вставил форму поиска с автозаполнением. Проблема в том, что поле ввода застревает в карте. Я не могу отобразить его вне карты.

<div style=" margin-top:100px;background: #00a6d6; width: 100%; height:100px;"><input id="address" style="position:absolute; left:1000px;"  type="text"
        placeholder="Enter a location"></div>

<div>
<div id="map-canvas" style="height:500px; width:500px;"></div></div>

http://jsfiddle.net/KyMCy/1/ Смотрите здесь. Я хочу, чтобы ящик поиска находился в синем контейнере.

Спасибо.

Ответ 1

Все, что вам нужно, это загрузить библиотеку "Места". Вам даже не нужно отображать карту.

new google.maps.places.Autocomplete(
  (document.getElementById('autocomplete')), {
    types: ['geocode']
  });

#autocomplete {
  width: 300px;
}

<input id="autocomplete" placeholder="Enter your address" type="text"></input>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

Ответ 2

В принципе, если я это хорошо понимаю, вы хотите иметь ввод с автозаполнением, который обновляет карты Google. Но вы хотите его за пределами карты.

Эта строка связывает ваш вход с картой. Вам это не нужно

map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

Затем вы просто удаляете left: 1000px со своего ввода и его.

http://jsfiddle.net/KyMCy/5/