Reputation: 1210
I am trying to position a floating panel textbox on a Google Map. I want the textbox position in the red box in the image below:
I can get the floating panel to appear above the map container (see code below).
HTML:
<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>
CSS:
.class--map {
width: 100%;
height: 400px;
background-color: grey;
}
I have tried to move the floating panel into the map container like this:
<div id="map" class="class--map">
<div class="container" id="floating-panel">
<input id="address" type="text" value="">
<input id="submit" type="button" value="Search">
</div>
</div>
But this hides the panel and textbox behind the map.
How is it best to get the panel/textbox on the map in the right position?
Upvotes: 0
Views: 1568
Reputation: 161404
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);
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>
Upvotes: 5