Google MapsノードのInfoWindowが動作しないと言われています

Question

InfoWindowではsaid in documentation, that I can set content to node, not only to stringです。

私はノードを設定しようとすると、残念ながら、それは動作しません：

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に変更してコメントを付けると、それが機能します。

Answer 1

$('<div>hello world</div>');はHTMLノードではなく、JQueryオブジェクトです。

$('<div>hello world</div>')[0]を使用すると、APIで使用できるものが得られます。

updated fiddle

コードスニペット：

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"></script> 
 
<div id="map_canvas"></div>