如何将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添加到谷歌地图作为覆盖

回答

相关问题