Javascript 如何在v3谷歌地图上以特定的纬度和经度绘制HTML元素？

我想在v3谷歌地图上绘制以下HTML代码（lat:73，lon:-122）：

<div style="width:200px; height:100px;">
    <span class="someclass">hello i want to be plotted, along with my image sibling</span>
    <img src="someimage.png"/>
</div>

你好，我想和我的图像兄弟一起被绘制

---

如何做到这一点？

您必须使用覆盖层。 查看详细的示例。您可以将其自定义为

---

包括文本部分，当然还有正确的坐标，您必须使用覆盖图来完成。 查看详细的示例。您可以将其自定义为

---

包括文本部分，当然还有右坐标

您可以为此使用自定义覆盖。和

以下是来自fiddle的HTML（仅限正文）：

---

您可以为此使用自定义覆盖。和

以下是来自fiddle的HTML（仅限正文）：

---

像个记号笔？像一个徽标？不，是和我的问题一起发布的代码，而不是在信息窗口中。像一个标记？像一个徽标吗？不，是与我的问题一起发布的代码，而不是在信息窗口中。是否可以允许HTML交互。例如，我的一些元素有onclick和mouseover，但我注意到，当它们以这种方式添加到映射中时，所有事件都被停用。更新了答案，并修改了一个click事件处理示例。您可以很容易地将其扩展到其他鼠标事件。是否可以允许HTML进行交互。例如，我的一些元素有onclick和mouseover，但我注意到，当它们以这种方式添加到映射中时，所有事件都被停用。更新了答案，并修改了一个click事件处理示例。您可以很容易地将其扩展到其他鼠标事件。

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<div id="map_canvas" style="height: 400px; width: 400px"></div>

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
    // Initialization
    this.setValues(opt_options);

    // Label specific
    var inner = this.inner_ = document.createElement('div');
    inner.style.cssText =
        'position: relative; left: -50%; top: -8px; ' +
        '/*white-space: nowrap;*/ border: 1px solid blue; ' +
        'padding: 2px; background-color: white';

    var div = this.div_ = document.createElement('div');
    div.appendChild(inner);
    div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
    var pane = this.getPanes().overlayMouseTarget;
    pane.appendChild(this.div_);

    // Ensures the label is redrawn if the text
    // or position is changed.
    var me = this;
    this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed', function() {
        me.draw();
    }), google.maps.event.addListener(this, 'text_changed', function() {
        me.draw();
    })];
};

// Implement onRemove
Label.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);

    // Label is removed from the map, stop updating its position/text.
    for (var i = 0, I = this.listeners_.length; i < I; ++i) {
        google.maps.event.removeListener(this.listeners_[i]);
    }
};

// Implement draw
Label.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));

    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';

    this.inner_.innerHTML = '\
        <div class="someclass" style="width:150px; height:50px;">\
          <img class="myimg" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>\
          <span class="myspan">\
            Click me!\
          </span>\
        </div>\
     ';
};

function initialize() {
    $('#map_canvas').on( 'click', 'img.myimg', function() {
        alert( 'Clicked image' );
    });
    $('#map_canvas').on( 'click', 'span.myspan', function() {
        alert( 'Clicked text' );
    });

    var latLng = new google.maps.LatLng(73, -122);

    var map = new google.maps.Map(
        document.getElementById('map_canvas'),
    {
        zoom: 5,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var label = new Label({
        map: map,
        position: latLng
    });
};

$(initialize);