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>

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

2 个答案: