Wie erstellt man das Verstecken- und Zeigen-Panel über Google Maps?

Question

Ich brauche Hilfe, weil ich nicht gut mit CSS bin. Ich möchte ein Floating-Fell erstellen und Panel auf Google Maps ähnlich dem hier gezeigten Beispiel anzeigen: http://jsfiddle.net/rionmonster/J8U25/

Aber ich versage immer noch. hier ist der Screenshot: wenn versteckt:

, wenn ich auf den roten Knopf Fenster anzuzeigen klicken:

hier ist mein 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;  
} 

und hier ist mein HTML-Tag:

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

danke für deine hilfe :)

Answer 1

ich die jsfiddle nehmen, dass Sie die Lösung zur Verfügung gestellt und wiederzugeben, wie ich geschrieben habe unten Sie es überprüfen können, und hier ist die Geige Demo 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> 

Dies ist die 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%; 
} 

Dies ist der jQuery-Code dafür:

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