1) Backup
First thing to do: copy/backup all the generated embed codes you have, just in case.
2) Remove repeating includes
All the generated code blocks will have start with the following:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
Remove this for all blocks of code, except the first.
3) Remove the callback call
Further down, you’ll also find this:
google.charts.load('42', {'packages':['geochart']});
Again, remove this bit of code from all entries except the first.
4) Remove load and and callback calls
Remove this from all blocks of code:
google.charts.setOnLoadCallback(drawVisualization);
5) Give unique names to the functions
All blocks of code will have this:
function drawVisualization() {</code
What we need to do is give them unique names.
So you could convert them to:
function drawVisualization_1() {
function drawVisualization_2() {
function drawVisualization_3() {
For example.
6) Update the resize function with the new function names
For each block, there will be something like:
window.onresize = function(event) {
drawVisualization();
};
You’ll need to replace the name of the function of each block, to the one you created. So something like:
window.onresize = function(event) {
drawVisualization_3();
};
7) And finally, create a new call to run all functions in the same callback
In the first block of code, the one we left the initial lines, after the line:
google.charts.load('42', {'packages':['geochart']});
Add:
google.charts.setOnLoadCallback(drawVisualization_general);
function drawVisualization_general(){
drawVisualization_1();
drawVisualization_2();
drawVisualization_3();
}
Notice that the names of the functions must be the same you used before when giving them unique names.