GoogleマップにオーバーレイとしてHTMLを追加する方法

Question

場所マーカーの近くに配置されたGoogleマップに単純なHTMLスニペットを追加しようとしていますが、良い例や助けを得ていません。 私はこのドキュメント読み：私の期待にその近く https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple としたが、私はそのように、位置を変更する矢印を隠し、とか、いくつかのカスタムスタイルを必要とするだろう...ここで

GMAPコード：

var gps = {lat: 48.2494324, lng: 16.3417493} 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('gmap'), { 
     center: gps, 
     zoom: 15 
    }); 
    var marker = new google.maps.Marker({ 
     position: gps, 
     map: map 
    }); 
}; 

ヒント？情報ウィンドウで可能ですか？まだ見つけられていない別の「簡単な」方法がありますか？私はいくつかのサンプルコードを感謝しますが、ヒントも大丈夫です、ありがとう。

Answer 1

1つのdivに2つのdivがあり、z-indexとcssの位置を設定することについて考えましたか？

.container 
 
{ 
 
    position: relative; 
 
    z-index:0; 
 
} 
 

 
.container .google-map-container 
 
{ 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 100%; /* Might not be required depending on google map element */ 
 
} 
 

 
.container .snippet 
 
{ 
 
    /* important */ 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 5px; 
 
    width: 30%; 
 
    height: 150px; 
 
    z-index: 15; 
 
    display: block; /* might get away without this */ 
 
    
 
    /* style */ 
 
    background: #fff; 
 
    border: 1px solid #000; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="google-map-container"> 
 
    <!-- Google map element goes here --> 
 
    </div> 
 
    <div class="snippet"> 
 
    <h3>Info title</h3> 
 
    <p>Lorem ipsum info text</p> 
 
    </div> 
 
</div>