在 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

一种选择是将其作为自定义控件添加到地图中。

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

概念证明小提琴

代码片段：

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

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