Trying to load a google chart through a click event - get the error: Uncaught Error: Map container not found

Question

I am trying to load a google chart through a jquery ajax call by clicking on a geojson layer, which is loaded over a map. I'm using the leaflet API for the map creation and for its layers and the google charts API for creating the chart. When I'm trying to load the page, it won't finish loading and it gives me the following error: Uncaught Error: Map container not found.

When I click on the error in the console, it takes me to the leaflet library where this part is marked as an error: ".get(t);if(!e)throw new Error("Map container not found.");if(e._leaflet)throw new Error("Map container is already initialized.");e._leaflet=!0},_initLayout:function(){var t=this._container;o.DomUtil.addClass(t,"leaflet-container"+(o.Browser.touch?" leaflet-t..."

When I'm commenting out the code for the chart, the page loads with the map without a problem.

I'm using these js libraries for the chart and the map:

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

My code for the chart, the geojson and the map is as follows:

function drawChart() {                                    

     var jsonData = $.ajax({
            url: "http://climatedataapi.worldbank.org/climateweb/rest/v1/country/cru/tas/year/" + feature.properties.ISO3.jsonp,
            data: {page: 1, format: "jsonp", prefix: "getdata"},
            crossDomain: true,
            jsonpCallback: "getdata",
        }).done(function (results) {
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Year');
            data.addColumn('number', 'Temp');
            $.each(results, function (i, row) {
                data.addRow([
                    (new Date(row.year)),
                    parseFloat(row.data),
                ]);
            });
            var chart = new google.visualization.LineChart(document.getElementById("container"));                                
            chart.draw(data, {
                    title: 'Annual Average Temperature'
                });                       
            })//end function
}//end drawChart                          

google.load('visualization', '1', {
       packages: ['corechart']
});  

var aLayerThree = L.geoJson(aGeoJson, {
        style: function (feature) {
            return {stroke: true, color: "#3333ff", weight: 2, fillOpacity: 0};
        },
        onEachFeature: function (feature, layer) {

                layer.on('mouseover', function() {
                        layer.setStyle({fillColor: "#4da6ff", fillOpacity: 0.4});
                        aDiv.innerHTML = feature.properties.NAME;

                layer.on('mouseout', function() {
                        layer.setStyle({ fillOpacity: 0});
                        aDiv.innerHTML = "Web-Mapping Techniques";

                $('layer').on('click', function() {       
                         drawChart();

                 })// end click
                })// end mouseout
                })//end mousover
        } // end onEachFeature
});// end GeoJson            

//Create our Map Object
map = L.map('myMap', {
                fullscreenControl: true,
            center: centerlatlng,
            minZoom: 2,
            zoom:   4,
            layers: [aLayerOne, aLayerThree]
});

My html looks like that:

<body>
<div class="container-fluid">       
    <div class="row">
        <!--<br />-->
    </div><!-- Row 1 -->        
    <div class="row">
        <nav class="col-lg-10 col-lg-offset-1 navbar navbar-default" role="navigation">            
            <a class="navbar-brand" href="#">Annual Temperature and Precipitation by Country</a>
            <ul class="nav navbar-nav pull-right">
                <li class="active"><a href="#" id="anInfo">Info</a></li>
                <li><a href="#" id="anAbout">About</a></li>
            </ul>                           
        </nav>
    </div><!-- Row 2 -->        
    <div class="row">           
        <div id="myMap" class="col-lg-10 col-lg-offset-1"></div>
    </div><!-- Row 3 -->        
    <div class="row">
        <br/>
    </div><!-- Row 4 -->        
    <div class="row">
        <div id="container" style="width:100%; height:400px;"></div>            
    </div><!-- Row 5 -->
</div>

I am a newbie in creating charts. What am I doing wrong? Thanks in advance!

How and where do you insert your Javascript? If it's in `` then it is loaded before the Javascript can "see" the map `
` and you'll get that error. Either put it at the end of your HTML or put the `map = new L.map(...)` inside code that checks when the page has loaded: http://stackoverflow.com/a/7088499/1781026 — chrki, May 07 '16 at 09:29

Trying to load a google chart through a click event - get the error: Uncaught Error: Map container not found

0 Answers0