Google地图外的地图搜索框 [英] Google maps search box outside map

问题描述

我正在使用Google Maps API，我已插入带有自动完成功能的搜索表单。问题是输入框卡在地图中。我不能在地图外显示。

I'm playing with the Google Maps API, and I've inserted a search-form with autocomplete. The problem is that the input-box is stuck into the map. I can't display it outside the map.

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

http://jsfiddle.net/KyMCy/1/ Watch here. I want the search-box to be in the blue container.

谢谢。

推荐答案

您在这里需要的是加载地方资源库。您甚至不需要显示地图。

All you need here is to load the Places library. You don't even need to display a map.

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>

这篇关于Google地图外的地图搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！