How to load Google MAP Charts library

Question

How to load Google MAP Charts library

Navigation

#1 by (2 votes)

1

When trying to draw a chart of type MAP, I get the following error:

Uncaught TypeError: google.visualization.Map is not a function

This happens only with this type of chart.

<html>
    <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script>google.load('visualization','1.0',{'packages':['corechart']});google.setOnLoadCallback(drawChart_locations_map);functiondrawChart_locations_map(){vardata=google.visualization.arrayToDataTable([["Cities","Users"],
                    ["Sao Paulo",4460],
                    ["Rio de Janeiro",1935]
                ]);
            var options = {"mapType":"satellite"};
            var chart = new google.visualization.Map(document.getElementById('googlechart_locations_map'));
            chart.draw(data, options);
            }

        </script>
    </head>
    <body>
        <div id="googlechart_locations_map"></div>
    </body>
</html>

javascript maps google-charts

asked by anonymous 04.11.2015 / 16:04

1 answer

How to hide a component in emberjs 2.1 equal to ng-hide? Format mask for TimeStamp attribute

score 2 · Accepted Answer

The Map() function does not belong to package corechart .

Try this:

<html>
    <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script>google.load('visualization','1.0',{'packages':['geochart']});google.setOnLoadCallback(drawChart_locations_map);functiondrawChart_locations_map(){vardata=google.visualization.arrayToDataTable([["Cities","Users"],
                    ["Sao Paulo",4460],
                    ["Rio de Janeiro",1935]
            ]);

            var options = {
                region: 'BR',
                displayMode: 'markers',
                colorAxis: {colors: ['orange', 'red']}
            };
    
            var chart = new google.visualization.GeoChart(document.getElementById('googlechart_locations_map'));
            chart.draw(data, options);
        };
    </script>
    </head>
    <body>
        <div id="googlechart_locations_map"></div>
    </body>
</html>

I changed the package to geochart and the function to GeoChart() , I also added options to show the chart correctly, following the reference available below.

Reference