html - 如何在Google map 上创建隐藏和显示面板？

我需要帮助，因为我不太擅长CSS。我想在Google地图上创建一个类似于此处示例的浮动隐藏和显示面板：
http://jsfiddle.net/rionmonster/J8U25/

但是我仍然失败。这是屏幕截图：
 隐藏时：


当我单击红色按钮以显示面板时：


这是我的CSS：

#map-canvas {
  margin:0;
  float: right;
  width: 70%;
  position: absolute;
  padding: 0;
  height: 650px;
  z-index:1;
  max-width: none;
}

#click {
  margin:0;
  height: 50px;
  width: 25px;
  position: absolute;
  background: red;
  float: right;
  margin-top: 200px;
  z-index: 2;
}

#floating-panel {
  float:right;
  width: 17%;
  position: absolute;
  top: 90px;
  left: 5%;
  z-index: 5;
  background-color: #fff;
  padding: 0px;
  display: none;
  border: 1px solid #999;
  text-align: left;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  margin-top: 90px;
}

这是我的html标签：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8">
      <div id="floating-panel">
        <b>Start: </b>
        <select id="start">
          <option value="Stasiun Pondok Cina">Pondok Cina</option>
        </select>
        <br> <b>End: </b>
        <select id="end">
          <option size="25" value="Margonda Residence">Margonda Residence</option>
        </select>
      </div>
      <div id='click'></div>
      <div id="map-canvas" ></div>
    </div>
  </div>
</div>

谢谢你的帮助 ：）

最佳答案

我已经使用了您提供的jsfiddle并重现了解决方案，正如我在下面发布的那样，您可以检查它，这是小提琴演示http://jsfiddle.net/meily/J8U25/1765/：

 <div class="container-fluid map-container">
    <div class="row">
    <div id='panel'>

        Hi!
        <div id="floating-panel">
        <b>Start: </b>
        <select id="start">
      <option value="Stasiun Pondok Cina">Pondok Cina</option>

       </select>
       <br> <b>End: </b>
        <select id="end">
      <option size="25" value="Margonda Residence">Margonda Residence</option>

        </select>

        </div>
    </div>
    <div id='click'>
    </div>

    <div class="map-canvas-container">
    <div id="map-canvas">
    <iframe frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=USA&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU">

    </iframe>
    </div>
    <a class="embedded-map-code" href="https://www.hostingreviews.website/compare/namecheap-vs-fatcow" id="get-data-for-embed-map">fatcow namecheap</a>
    </div>
</div>

</div>

这是CSS：

.map-container {
    position: relative;
}
#panel
{
     height: 500px;
     background: black;
     opacity: 0.9;
     float: left;
     display: none;
     color: white;
     font-size: xx-large;
     position: absolute;
     left: 0;
      z-index:1;
}
#click
{
     height: 50px;
     width: 25px;
     background: red;
     float: left;
     margin-top: 200px;
     z-index: 1;
     display: block;
     position: absolute;
     left: 0;
}

.map-canvas-container {
   overflow:hidden;
   width:1000px;
   height:500px;
   resize:none;
   max-width:100%;
}

iframe {
   height:100%;
   width:100%;
   border:0;
}

#embed-map-canvas img{
   max-width:none!important;
   background:none!important;
   font-size: inherit;
}
#map-canvas {
   margin:0;
   float: left;
   width: 70%;
   position: absolute;
   padding: 0;
   height:100%;
   width:100%;
   max-width:100%;
}

这是为此的jQuery代码：

$('#click').click(function()
{
    $("#panel").animate({width:'toggle'},500);
});

关于html - 如何在Google map 上创建隐藏和显示面板？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37781126/