在Google地图上定位浮动面板/文本框

Question

我正在尝试在Google地图上放置浮动面板文本框。我希望文本框位置位于下图中的红框中：

我可以让浮动面板显示在地图容器上方（参见下面的代码）。

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

我试图将浮动面板移动到地图容器中，如下所示：

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

但是这会隐藏地图背后的面板和文本框。

如何将地图上的面板/文本框放在正确的位置？

Answer 1

一种选择是将其作为Custom Control添加到地图中。

var controlDiv = document.getElementById('floating-panel');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);

proof of concept fiddle

代码段

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"></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>