Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 1000
user3111076 Avatar asked Jan 04 '14 13:01

user3111076


People also ask

Where is the search box in Google Maps?

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.

How do I hide the side panel in Google Maps?

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.

How do I enclose an area on Google Maps?

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.

How do I create an autocomplete search box in Google Maps?

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.


2 Answers

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/

like image 66
Gary Olsson Avatar answered Sep 22 '22 07:09

Gary Olsson


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>
like image 39
MrUpsidown Avatar answered Sep 18 '22 07:09

MrUpsidown