谷歌在地图外部映射搜索框

Question

我正在使用Google Maps API,我已经插入了一个包含自动填充功能的搜索表单.问题是输入框卡在地图中.我无法在地图外显示它.

<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/在这里观看.我希望搜索框位于蓝色容器中.

谢谢.

Answer 1

基本上,如果我理解得很好,你想要一个带有自动完成功能的输入来更新Google地图.但是你想要它在地图之外

这一行是将您的输入绑定到地图的.你不需要它

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

然后你只需left: 1000px从你的输入中删除它就是这样.

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

Answer 2

这里所需要的只是加载Places库.你甚至不需要显示地图.

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>