Dodaj wykres Google do infowindow za pomocą map Google api

Question

Widziałem wiele innych osób z tym samym pytaniem, ale nie mogłem znaleźć odpowiedzi. Mam prostą mapę, którą zbudowałem za pomocą aplikacji Google Maps Javascript api v3. Mapa ma kilka znaczników, które są powiązane z infomatindow, aby wyświetlić konkretne informacje dla każdego znacznika. Chcę dodać wykres google do infowindow, ale po prostu nie mogłem wymyślić, jak to zrobić. Przeszedłem przez każdy post, jaki mogłem znaleźć (tutaj i na innych forach) i zauważyłem, że inni ludzie próbują zrobić coś podobnego, ale wydaje się, że nie ma konkretnej odpowiedzi. Zauważyłem, że ludziom udaje się robić takie rzeczy przy użyciu tabel fusion, ale nie jest to moim przypadkiem, gdybym ładował dane z tabeli MySQL. Na razie mam prostą mapę którego kod znajduje się poniżej:

function initialize() { 

    var mapOptions = { 
     center: new google.maps.LatLng(-33.837342,151.208954), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    var data = [ 
     ['Bondi Beach', -33.891044,151.275537], 
     ['Cronulla Beach', -34.046544,151.159601], 
    ]; 

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537); 
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601); 

    var marker1 = new google.maps.Marker({ 
     position: myLatLng1, 
     map: map 
    }); 

    var marker2 = new google.maps.Marker({ 
     position: myLatLng2, 
     map: map 
    }); 

    google.maps.event.addListener(marker1, 'click', function() { 
     var infowindow1 = new google.maps.InfoWindow(); 
     infowindow1.setContent('Display the chart here'); 
     infowindow1.open(map, marker1); 
    }); 

    google.maps.event.addListener(marker2, 'click', function() { 
     var infowindow2 = new google.maps.InfoWindow(); 
     infowindow2.setContent('Display the chart here'); 
     infowindow2.open(map, marker1); 
     infowindow2.setContent('Display the chart here'); 
     infowindow2.open(map, marker2); 
    });   
    }  

i Oto kod dla prostego wykresu na przykład:

https://google-developers.appspot.com/chart/interactive/docs/quick_start

próbowałem wiele różnych podejść i tym, co wydaje mi się bardziej oczywiste, było dodanie kontenera() w ramach właściwości setContent w InfoWindow, a następnie wywołanie funkcji zewnętrznej, która tworzy wykres. Wydaje się, że to nie działa, ponieważ funkcja nie widzi pojemnika. Próbowałem również osadzić cały kod do umieszczenia na wykresie w obiekcie setContent jak zasugerowano w tym poście:

using google chart tools in a google maps api infowindow content string

udało mi się wykonać kod bez błędów, jednak nic nie jest pokazane. Anotther podejście byłoby utworzyć wykres na innej stronie html i jakoś ustawić tę stronę do właściwości setContent, a także żadnych sukcesów.

Za chwilę się poddam, ponieważ nie widzę sposobu, żeby to zrobić.

Byłbym wdzięczny za każdą pomoc.

Dzięki

Jose

Answer 1

doens't To wydaje się działać jako funkcja nie widać pojemnik.

Możesz przechodzić pojemnik jako argument do drawChart()

Ale myślę lubisz rysować wykres zapełnione danymi związanymi z markerem, więc proponuję przekazać znacznik jako argument do drawChart() i utwórz tam infoWindow.

próbki kodu (bez implementaion danych związanych marker, ponieważ nie jest jasne, jaki rodzaj danych, które lubią rysować)

 function drawChart(marker) { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 1], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 

    // Set chart options 
    var options = {'title':'Pizza sold @ '+ 
          marker.getPosition().toString(), 
        'width':300, 
        'height':200}; 

    var node  = document.createElement('div'), 
     infoWindow = new google.maps.InfoWindow(), 
     chart  = new google.visualization.PieChart(node); 

     chart.draw(data, options); 
     infoWindow.setContent(node); 
     infoWindow.open(marker.getMap(),marker); 
    } 

Wykorzystanie:

google.maps.event.addListener(marker1, 'click', function() { 
    drawChart(this); 
}); 

Demo: http://jsfiddle.net/doktormolle/S6vBK/