Google Maps Infowindow에 여러 차트 추가

Question

Google지도 infowindow에 Google 차트를 추가하는 데 정말 어려움을 겪고있었습니다. 그래서, 나는 아래의 게시물에서 Molle 박사 (정말로 다시 한 번 고마워 함)로부터 정말로 소중한 도움을 얻었습니다.

Add a google chart to a infowindow using google maps api

나의 투쟁은 이제 정보창에 하나 개 이상의 차트를 추가하는 것입니다. 나는 그 컨테이너를 innerHTML을 통해 각 컨테이너에 연결했기 때문에 차트가 기능을 상실했다는 사실을 제외하고는 잘 작동합니다 (옵션 위에 마우스를 사용할 수 없음).

이 코드는 innerHTML을 사용하여 추가하는 코드이며 차트 기능을 유지할 수있는 방법이 있는지 알고 싶습니다.

function drawChart(marker,map) { 

    // Create the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Label', 'Value'], 
     ['Orange', 80], 
     ['Apple', 55], 
     ['Watermelon', 68] 
    ]); 

    var options = { 
     width: 300, height: 150, 
     redFrom: 0, redTo: 25, 
     yellowFrom:26, yellowTo: 50, 
     greenFrom:51, greenTo: 100, 
     minorTicks: 5 
    }; 


    var nodeGauge = document.createElement('chart_div'), 
     infoWindow = new google.maps.InfoWindow(), 
     nodeCol = document.createElement('col_div'); 
     chart  = new google.visualization.Gauge(nodeGauge); 
     colChart = new google.visualization.ColumnChart(nodeCol); 


     colChart.draw(data,{}); 
     chart.draw(data, options); 

     infoWindow.setContent(nodeGauge.innerHTML + nodeTab.innerHTML); 
     infoWindow.open(map,marker); 
    } 

Answer 1

는 당신이 각 차트의 <div>를 만드는 또 다른 div 태그에 모두 추가 할 수 있다고 생각하고, 그와 같은 InfoWindow의 내용을 설정합니다.

var nodeGauge = document.createElement('div'), 
    infoWindow = new google.maps.InfoWindow(), 
    nodeCol = document.createElement('div'), 
    parentDiv = document.createElement('div'); 
    chart  = new google.visualization.Gauge(nodeGauge); 
    colChart = new google.visualization.ColumnChart(nodeCol); 

parentDiv.appendChild(nodeGauge); 
parentDiv.appendChild(nodeCol); 

colChart.draw(data,{}); 
chart.draw(data, options); 

infoWindow.setContent(parentDiv); 
infoWindow.open(map,marker);