Zikri Fadzil Zikri Fadzil - 2 months ago 8
HTML Question

Searchbox for google map is not showing at all

So I have a google map on my website with searchbox and all..
The problem is that the input is not displaying itself even though I didnt use any jquery to it.

<div class="form-group">
<label for="address-map">Enter your property name/property address to plot location</label>
<input id="pac-input" class="form-control" type="text" size="50" placeholder="Enter a location" autocomplete="on" style="border:3px solid #f5b9b9"/>
</div>
<div id="map"></div>


and the script:

var input = /** @type {!HTMLInputElement} */(
document.getElementById('pac-input'));

var types = document.getElementById('type-selector')
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

var autocomplete = new google.maps.places.Autocomplete(input,option);
autocomplete.bindTo('bounds', map);


I am certain the TOP_LEFT is doing something to it and I need a workaround to display the input and still can search.
I did search for answers but sadly it made my map not appear at all even the input.

------edit-----

I guess I didn't made my question clear as I would like the input be on the upper part of the map where both are in different divs..

Answer

Anyway as I already solved my own question so all I did was to just commment out the position of the input and it would let my input be positioned up the map div.

//this line is commented out
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

This is the layout that I wanted

Comments