Google maps search box outside map

问题

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/ Watch here. I want the search-box to be in the blue container.

Thanks.

回答1:

Basically if I understand it well, you want to have an input with autocomplete that update the Google maps. But you want it outside the map

This line, is what bind your input to the map. You don't need it

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

Then you just remove the left: 1000px from your input and that's it.

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

回答2:

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>

来源：https://stackoverflow.com/questions/20921378/google-maps-search-box-outside-map