Es wird gesagt, dass InfoWindow von Google Maps Knoten Inhalt nicht funktioniert

Question

Es ist said in documentation, that I can set content to node, not only to string, in InfoWindow.

Leider, wenn ich versuche, Knoten zu setzen, funktioniert es nicht:

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 ist hier: https://jsfiddle.net/pmek2zhs/3/

Klicken Sie auf markiert und Sie werden nichts scheint sehen. Wenn Sie die html Variablenzuweisung in die kommentierte ändern, wird es funktionieren.

Answer 1

$('<div>hello world</div>'); ist kein HTML-Knoten, sondern ein JQuery-Objekt.

Verwenden Sie $('<div>hello world</div>')[0], um etwas zu erhalten, das die API verwenden kann.

updated fiddle

Code-Schnipsel:

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>