Google地图：如何将HTML元素添加到特定坐标？

Question

我想知道如何将标准HTML元素（div，button）添加到地图上的一组特定坐标中？

例如，我有一组坐标，我想向他们附加自定义气球通知

Google Maps with custom styled element attached to a set of coordinates http://i45.tinypic.com/dfc7sj.png

当我离开坐标时，元素应该消失，当我平移回来时，元素应该重新出现。

是否可以使用Google地图执行此操作？

Answer 1

您可以使用自定义叠加层 - https://developers.google.com/maps/documentation/javascript/customoverlays用于

Answer 2

正如罗马所说，你可以创建一个实现GOverlay的自定义javascript对象。

这是另一个S.O.的例子。问题该家伙想在谷歌地图上插入一个SVG。但是我很确定你可以使用他的解决方案来插入HTML。

How can I overlay SVG diagrams on Google Maps?

Answer 3

如果您想制作自定义气球，请参阅此问题：

Google Maps Bubble Templates

Answer 4

您要查看的是openInfoWindowHtml功能。您需要先向地图添加marker。请查看Google上的this example，了解相关的最佳功能。

Answer 5

请参阅this作为最新Google Maps API版本（v3）的基类：

用法：

var rectBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(54.478490, 18.550357),
    new google.maps.LatLng(54.478434, 18.551952)
);
var obj = new overlayText(rectBounds, 'Some<br />HTML', objGMap3);