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.
Search for a place on Google MapsAt the top, tap the search box and enter an address, name of a place, or choose a category, like gas stations or groceries. Tip: After you find a place on the map, you can check directions to the place in a list, details about a place, or get directions with voice-guided navigation.
This feature is the only feature Google decided to announce. They announced it in the Google Maps Help forum saying: We've heard your feedback that that you'd like to be able to see the entire map by hiding the search box and side panel. To hide the panel, go to the right of the panel and click the arrow.
Right-click on the map at your starting point and choose the Measure distance option. Add points around the location's boundary. Once you close the shape by clicking on the starting point, the Google Maps area calculator will automatically process the area of your shape.
Google Map with Autocomplete Search BoxCreate an input element ( searchInput ) where the autocomplete addresses search will be added. Create a DIV element ( map ) to display the Google Map. Specify the elements to display the geolocation data.
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/
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With