Google지도 노드 내용의 InfoWindow가 작동하지 않는다고합니다.

Question

InfoWindow에서는 said in documentation, that I can set content to node, not only to string입니다. 표시에 https://jsfiddle.net/pmek2zhs/3/

를 클릭하면 아무것도 표시되지 않습니다 볼 수 있습니다 :

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은 여기에 있습니다 : 나는 노드를 설정하려고하면

불행하게도, 그것은 작동하지 않습니다. 변수 할당을 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>