据说，Google Maps 节点内容的 InfoWindow 不起作用答案

【问题标题】：It is said, that InfoWindow of Google Maps node content does not work据说，Google Maps 节点内容的 InfoWindow 不起作用
【发布时间】：2017-03-31 13:35:52
【问题描述】：

它是said in documentation, that I can set content to node, not only to string，在 InfoWindow 中。

不幸的是，当我尝试设置节点时，它不起作用：

var point;

    point = new google.maps.LatLng(43.65654, -79.90138);
    // html = 'hello world';
    html = $('<div>hello world</div>');
    var marker = new google.maps.Marker({
        position: point,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function () {

        infowindow.setContent(html);
        infowindow.open(map, marker);
    });

Jsfiddle 在这里：https://jsfiddle.net/pmek2zhs/3/

单击标记，您将看不到任何内容。如果您将 html 变量赋值更改为已注释的变量赋值，它将起作用。

【问题讨论】：

标签： javascript jquery google-maps infowindow

【解决方案1】：

$('<div>hello world</div>'); 不是 HTML 节点，它是一个 JQuery 对象。

使用$('<div>hello world</div>')[0] 获取API 可以使用的东西。

updated fiddle

代码 sn-p：

var map = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {

  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787, -79.359741),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Add markers to the map
  // Set up three markers with info windows

  var point;

  point = new google.maps.LatLng(43.65654, -79.90138);
  // html = 'hello world';
  html = $('<div>hello world</div>')[0];
  var marker = new google.maps.Marker({
    position: point,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(html);
    infowindow.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click');

}


initialize();

html,
body {
  height: 100%;
}

#map_canvas {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

【讨论】：