CODEWITHSUNDEEP
htmlgoogle-maps
Winthorpe
Winthorpe

Reputation: 1210

Position floating panel/textbox on Google Map

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:

enter image description here

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

Answers (1)

geocodezip
geocodezip

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);

proof of concept fiddle

enter image description here

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

Related Questions