如何將HTML添加到谷歌地圖作爲覆蓋

-1

我想添加一個簡單的HTML代碼片段放到我的谷歌地圖放置附近的位置標記，但還沒有找到一個很好的例子或幫助我的文檔。我閱讀本文檔： https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple 和它接近我的期望，但我需要一些自定義樣式，改變位置，隱藏的箭頭，和類似的東西...如何將HTML添加到谷歌地圖作爲覆蓋

這裏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 
    }); 
};

任何提示？ infowindow可能嗎？有沒有找到另一種「簡單」的方式？我會欣賞一些示例代碼，但提示也可以，謝謝。

來源

2017-09-14 ggzone

你有沒有想過在一個div中設置兩個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>

來源

2017-09-14 15:36:05 Craig

肯定。問題是，我不在乎調整大小和類似的東西，但我需要與位置相關的信息div。如果您在地圖中滾動，該框應始終靠近我的標記 – ggzone

啊！好吧，我現在和你在一起。查看信息窗口選項文檔（https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions）似乎沒有太大的靈活性。您是否嘗試過在內容中添加一個具有Class和/或ID屬性的div，並試圖用CSS擴展該div來嘗試並覆蓋信息窗口？這是一個遠射，但可能會奏效。 – Craig

從使用infoWindow更改爲customOverlay，現在我完全控制了樣式，thx爲您提供幫助 – ggzone

如何將HTML添加到谷歌地圖作爲覆蓋

回答

相關問題