title: Highmaps with Highcharts : Highcharts error #17 with jQuery
body: <p>I am working on using highcharts with highmaps. I have to show state level drilldown. So, I am using <a href="http://www.highcharts.com/maps/demo/latlon-advanced" rel="nofollow">http://www.highcharts.com/maps/demo/latlon-advanced</a>. My code is as follows : </p>
  
  <pre><code>    var baseMapPath = "https://code.highcharts.com/mapdata/";
      localStorage.setItem('locationHash', 'countries/us/us-all'),
      mapGeoJSON = null;
      function change() {
          console.log("localStorage : ", localStorage.getItem('locationHash'));
          var locationVariable = localStorage.getItem('locationHash') + '.js';
          var mapKey = locationVariable.slice(0, -3),
          javascriptPath = baseMapPath + locationVariable,
          up = angular.element(document.getElementById('up')),
          container = angular.element(document.getElementById('container')),
          containerHighcharts = container.highcharts();
  
  
          if (containerHighcharts) {
              containerHighcharts.showLoading('&lt;i class="fa fa-spinner fa-spin fa-2x"&gt;&lt;/i&gt;');
          }
          function mapReady(jsonData) {
              console.log("mapKey inside mapReady function : ", mapKey);
              console.log("Highcharts : ", Highcharts);
              console.log("typeof : ", typeof(Highcharts));
              mapGeoJSON = Highcharts.maps[mapKey];
              var data = jsonData,
                  match;
  
              // console.log("mapGeoJSON inside mapReady: ", mapGeoJSON);
              console.log("data : ", data);
              if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
                  var parent = {
                      desc: 'World',
                      key: 'custom/world'
                  };
              }
              up.html('');
              if (parent) {
                  up.append(
                      $('&lt;a&gt;&lt;i class="fa fa-angle-up"&gt;&lt;/i&gt; ' + parent.desc + '&lt;/a&gt;')
                          .attr({
                              title: parent.key
                          })
                          .click(function () {
                              localStorage.setItem('locationHash', parent.key);
                              change();
                          })
                  );
              }
              container.highcharts('Map', {
                  title: {
                      text: 'Aosis : Highmaps Lat/Long'
                  },
                  chartType: 'map',
                  tooltip: {
                      pointFormat: '{point.countryName} : {point.count}'
                  },
                  mapNavigation: {
                      enabled: true,
                      buttonOptions: {
                          verticalAlign: 'bottom'
                      }
                  },
                  series: [{
                      name: 'Basemap',
                      mapData: mapGeoJSON,
                      borderColor: '#606060',
                      nullColor: 'rgba(200, 200, 200, 0.2)',
                      showInLegend: false
                  }, {
                      name: 'Separators',
                      type: 'mapline',
                      data: Highcharts.geojson(mapGeoJSON, 'mapline'),
                      color: '#101010',
                      enableMouseTracking: false,
                      showInLegend: false
                  }, {
                      type: 'mapbubble',
                      dataLabels: {
                          enabled: true,
                          format: '{point.countryName}'
                      },
                      name: 'Cities',
                      data: data,
                      maxSize: '3%',
                      color: Highcharts.getOptions().colors[0]
                  }],
                  plotOptions:{
                      series:{
                          point: {
                              events: {
                                  // On click, look for a detailed map
                                  click: function () {
                                      console.log("click event");
                                      var key = this.key;
                                      localStorage.setItem('locationHash', 'countries/' + key.substr(0, 2) + '/' + key + '-all');
                                      if(!(/-/.test(key)))
                                          change();
                                      else
                                          console.log("Result inside else : ", /-/.test(key));
                                  }
                              }
                          }
                      }
                  }
              });
          }
  
          function getLatLongData(){
              console.log("Inside getLatLongData function");
              $.ajax({
                    url: 'https://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&amp;callback=?',
                    type: 'GET',
                    dataType: 'json',
                    success: function(jsonData){console.log("Completed jsonData call. Now calling mapReady function"); mapReady(jsonData)}
                  });
          }
          if (Highcharts.maps[mapKey]) {
              getLatLongData();
          } else {
              $.getScript(javascriptPath, getLatLongData);
          }
      }
  
      //Trigger the change function on page load
      change();
  </code></pre>
  
  <p>My highcharts source files are as follows : </p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/maps/modules/map.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I am getting error: </p>
  
  <blockquote>
    <p>Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17.</p>
  </blockquote>