Highcharts in InfoWindow on Google Maps

Question

I would like to understand why the chart doesn't display inside the InfoWindow, after the first click.

As you can see on the fiddle I provide, on the first click on any marker, the chart displays correctly inside the InfoWindow, but on the next click on a marker the InfoWindow stays blank and no chart is displayed. I would like to understand why it stays blank and if there is a possibility of fixing it so at each click on a marker, the chart will display as intended.

var marker, i;
var contentDiv = '<div id="container" style="height:350px; width:350px"></div>';

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        title: locations[i][0]+ " (" + locations[i][1] + " stars)"
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        var selectedname = locations[i][0];
        marker.setAnimation(google.maps.Animation.BOUNCE);
        stopAnimation(marker);
        $.ajax({
                success: function(data) {
                    iw.open(map, marker);                       
                    iw.setContent(contentDiv);
                    dataChart = {   
                        chart: {
                            borderWidth: 2,
                            renderTo: document.getElementById('container'),
                            zoomType: 'x',
                            type:"spline",
                            height:350,
                            width:350,
                            marginRight:40
                        },
                        title: {
                            text: 'Monthly Average Temperature',
                            x: -20 //center
                        },
                        subtitle: {
                            text: 'Source: WorldClimate.com',
                            x: -20
                        },
                        xAxis: {
                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                        },
                        yAxis: {
                            title: {
                                text: 'Temperature (°C)'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            valueSuffix: '°C'
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle',
                            borderWidth: 0
                        },
                        series: [{
                            name: 'Tokyo',
                            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                        }, {
                            name: 'New York',
                            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                        }, {
                            name: 'Berlin',
                            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                        }, {
                            name: 'London',
                            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                        }]
                    }
                    chart = new Highcharts.Chart(dataChart);
                }

        });
            return false
        }
    })
    (marker, i));
}

Here is the fiddle of the entire code : http://jsfiddle.net/YRNHP/5/

Thank you in advance, Pouyo

Answer 1

This is a timing issue.

You call iw.setContent(contentDiv); and then immediately call Highcharts. Highcharts is acting on an element in the contentDiv variable, but has it become part of the DOM yet? When you reuse your InfoWindow, its part of the DOM from the last call, but then it gets swapped out; which does Highcharts use?

I'd add a domready event to your InfoWindow (that way you know the contentDiv is inserted and available) and use that to init the Highchart

google.maps.event.addListener(iw,'domready',function(){
   // draw chart here
});

// later on ...

iw.open(map, marker);                   
iw.setContent(contentDiv);  // when contentDiv is part of DOM above function fires

See udpated fiddle here.