How to load Google MAP Charts library

Asked

Viewed 256 times

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

        function drawChart_locations_map() {
            var data = 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

1 answer

2


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

Try it like 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);

        function drawChart_locations_map() {
            var data = 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(), also added the options to show Chart correctly by following the available reference below.

Reference

Browser other questions tagged javascript maps google-charts

You are not signed in. Login or sign up in order to post.