Add a google chart to a infowindow using google maps api

Question

I've seen many other people with the same question but couldn't find a answer. I have a simple map I built using the Google Maps Javascript api v3. The map has a few markers which are linked to an infowindow to display specific information for each marker. I want to add a google chart to the infowindow but just couldn't figure out how to do it. I went through every single post I could find (here and in other forums) and I've noticed other people trying to do something similar but seems that there's no specific answer. I've noticed people are successful doing such thing using fusion tables, but this is not my case as I which to load the data from a MySQL table. For now I have a simple map which the code is shown below:

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

and here is the code for a simple chart for example:

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

I've tried many different approaches and the one the seems more obvious to me was to add a container () within the setContent property of the InfoWindow and then call an external function which creates the chart. This doens't seems to work as the function can't see the container. I've also tried to embed the entire code for the chart in the setContent property as suggested on this post:

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

I've managed to execute the code with no errors, however nothing is shown. Anotther approach would be create the chart in another html page and somehow set this page to the setContent property, also no success achieved.

I'm about to give up as I can't see a way of doing this.

I'd appreciate any help.

Thanks

Jose

Answer 1

This doens't seems to work as the function can't see the container.

You may pass the container as argument to drawChart()

But I guess you like to draw the chart populated with data related to the marker , so I would suggest to pass the marker as argument to drawChart() and create the infoWindow there.

Sample-code(without implementaion of marker-related data, as it's not clear what kind of data you like to draw)

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

usage:

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

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