Aggiungi un grafico di google a una finestra in basso utilizzando google maps api

Question

Ho visto molte altre persone con la stessa domanda ma non sono riuscito a trovare una risposta. Ho una mappa semplice che ho creato usando il Javascript api v3 di Google Maps. La mappa ha alcuni indicatori collegati a una finestra in basso per visualizzare informazioni specifiche per ogni indicatore. Voglio aggiungere un grafico di google in infowindow ma non riesco a capire come farlo. Ho esaminato ogni singolo post che ho trovato (qui e in altri forum) e ho notato che altre persone cercano di fare qualcosa di simile ma sembra che non ci sia una risposta specifica. Ho notato che le persone riescono a fare qualcosa di simile usando le tabelle di fusione, ma questo non è il mio caso per caricare i dati da una tabella MySQL. Per ora ho una semplice mappa che viene visualizzato il codice qui sotto:

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); 
    });   
    }  

ed ecco il codice per un semplice grafico, ad esempio:

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

Ho provato molti approcci diversi e quello che mi sembra più ovvio è stato aggiungere un contenitore() all'interno della proprietà setContent dell'InfoWindow e quindi chiamare una funzione esterna che crea il grafico. Questo non sembra funzionare in quanto la funzione non può vedere il contenitore. Ho anche cercato di incorporare l'intero codice per il grafico nella proprietà setContent come suggerito in questo post:

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

Sono riuscito a eseguire il codice senza errori, ma non viene mostrato nulla. Un approccio più avanzato sarebbe creare il grafico in un'altra pagina HTML e in qualche modo impostare questa pagina sulla proprietà setContent, anche senza successo.

Sto per arrendermi perché non riesco a vedere un modo per farlo.

Apprezzerei qualsiasi aiuto.

Grazie

Jose

Answer 1

Questo doens't sembra funzionare in quanto la funzione non può vedere il contenitore.

Si può passare il contenitore come argomento di drawChart()

Ma credo che ti piace disegnare il grafico popolato con i dati relativi al marcatore, quindi vorrei suggerire di passare il marcatore come argomento di drawChart() e crea la finestra di informazioni lì.

Sample-code (senza implementaion dei dati marcatori legati, in quanto non è chiaro che tipo di dati che si piace disegnare)

 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); 
    } 

utilizzo:

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

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