13

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.

4

2 Answers 2

28

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/

3
  • 1
    This is the correct answer. The one by MrUpsidown actually refers to the "autocomplete" api call and not the "searchbox". There is a significant difference - developers.google.com/maps/documentation/javascript/… Oct 11, 2015 at 19:47
  • "The problem is that the input-box is stuck into the map. I can't display it outside the map." That's the problem I read. I think this answer is what he wanted. I vote up for the answer
    – Joe Kdw
    Jan 11, 2016 at 8:46
  • 1
    Excellent. Thanks for the succinct answer.
    – MartinJH
    Nov 20, 2016 at 9:07
15

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>

1
  • Where's the callback of search result?
    – jofftiquez
    Aug 29, 2016 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.