Position floating panel/textbox on Google Map
Solution 1:
One option would be to add it as a Custom Control to the map.
var controlDiv = document.getElementById('floating-panel');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
proof of concept fiddle
code snippet:
function initialize() {
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var mapOptions = {
center: {
lat: 45,
lng: -100
},
zoom: 2,
mapTypeId: 'roadmap'
};
// Display a map on the page
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// add floating-panel control
var controlDiv = document.getElementById('floating-panel');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.class--map {
width: 100%;
height: 400px;
background-color: grey;
}
.container {
padding: 5px;
margin: 5px;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="container" id="floating-panel">
<input id="address" type="text" value="">
<input id="submit" type="button" value="Search">
</div>
<div id="map" class="class--map">
</div>