Google geo chart dynamic loading not working with firefox.

[Tommy Mckinnon]

Hello,
I have a webpage that dynamically loads a Google Geo Chart with
country and rank data to be displayed. I am using Jquery to load the
html and javascript code directly into the div on the page.

It works correctly with Chrome and Internet explorer, but not Firefox.

The code/html that is loaded dynamically looks like this:

<div id='map_div' style='width:750px; height:500px;'></div>
<script type='text/javascript'>
$(document).ready(function(){
var map_data = new google.visualization.DataTable();
map_data.addColumn('string', 'Country');
map_data.addColumn('number', 'Rank');
map_data.addRows([["USA",7],["UK",48],["Norway",48],["Denmark",52],
["Australia",65],["Canada",79],["New Zealand",107],["Malta",147],
["Dominican Republic",176],["Panama",184],["Peru",261],["Greece",265],
["Switzerland",269],["Ireland",274],["Luxembourg",288],["Romania",304],
["Guatemala",307],["Austria",313],["Colombia",327],["Belgium",330],
["Argentina",336],["Italy",339],["Sweden",364],["France",368],
["Venezuela",384],["Slovakia",389],["Germany",407],["Chile",435],
["Honduras",441],["Bulgaria",448],["Spain",454],["Estonia",463],
["Finland",471],["Slovenia",508],["El Salvador",515],["Mexico",520],
["Netherlands",533],["Nicaragua",538],["Cyprus",543],["Czech Republic",
560],["Bolivia",569],["Lithuania",612],["Ecuador",812],["Poland",858],
["Latvia",917]]);

var map_options = {colorAxis: {colors: ['#fee82f', '#000000']}};

var map_chart = new
google.visualization.GeoChart(document.getElementById('map_div'));
map_chart.draw(map_data, map_options);

});

</script>

The page can be seen at http://analyticalpath.com/app/466959933/ and
you can load the map by clicking the "Worldwide Map" tab on the left,
then click "APP POPULARITY MAP".

The loaded code is displayed in the console when that menu item is
clicked.

In Firefox, the javascript has no errors according to firebug. The
google iframe for the map actually populates the "map_div" element so
it appears that the javascript is actually working correctly because
its getting a response from google chart api.

This leads me to believe that the DataTable values are not being sent
to the google chart api, thus I am receiving an empty map back to my
website.

The above code works correctly when used in google playground even on
Firefox. So its definitely something to do with dynamically loading
the content.

Any help would be greatly appreciated.

Thanks,

Tommy

[asgallant]

There are known problems with loading javascript functions dynamically like this when using the viz API.  I generally find it easier to load the data dynamically and use a generic function that can draw whatever chart you need from the data fetched.

[Tommy Mckinnon]

Hi Everyone,
In case anyone else is having the same problem as me, I figured it
out. All I had to do is add a setTimeout of 100ms before loading the
map. It seems like firefox was calling the function before all of the
javascript had fully loaded.

It works in all browsers now. You can see here http://analyticalpath.com/app/329670577/&test

Cheers,

Tommy