title: Receiving "Highcharts is not defined" error when using maps (Highmaps / Highcharts)
body: <p>I've used Highcharts quite a bit and the charts work great, but I've been stuck trying to make Highmaps work for quite a while now.</p>
  
  <p>I believe I have everything setup correctly with my test map that I'm trying to make work because it works correctly in <a href="http://jsfiddle.net/h7oh56nk/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>The error I'm receiving in my browser console is this:</p>
  
  <blockquote>
    <p>"Uncaught ReferenceError: Highcharts is not defined at
    <a href="https://code.highcharts.com/mapdata/custom/world-highres.js:1:1" rel="nofollow noreferrer">https://code.highcharts.com/mapdata/custom/world-highres.js:1:1</a> (anonymous function) @ world-highres.js:1"</p>
  </blockquote>
  
  <p>The first part of <a href="https://code.highcharts.com/mapdata/custom/world-highres.js" rel="nofollow noreferrer">world-highres.js</a> is:  <code>Highcharts.maps["custom/world-highres"] = { ...</code></p>
  
  <p>Does anyone know why Highcharts would be coming back as undefined here?</p>
  
  <p>I'm using Meteor 1.3.5.1 and I have Highcharts 5.0.4 installed through NPM.</p>
  
  <p>Here's how I currently have things setup:</p>
  
  <p><strong>exampleTemplate.js</strong></p>
  
  <pre><code>import Highcharts from 'highcharts';
  require('highcharts/modules/map')(Highcharts);
  
  Template.exampleTemplate.onRendered(function() {
  
    // Example data
    var mymapdata = [
      {
       key: "US",
       value: 198812
      },
      {
       key: "GB",
       value: 52894
      },
      {
       key: "CA",
       value: 35572
      }
    ];
  
    // Initiate
    Highcharts.mapChart('country-map-container', {
          title: {
              text: 'Highmaps Example'
          },
          subtitle: {
              text: 'Example'
          },
          mapNavigation: {
              enabled: true,
              buttonOptions: {
                  verticalAlign: 'bottom'
              }
          },
          colorAxis: {
              min: 0
          },
  
          series: [{
              data: mymapdata,
              mapData: Highcharts.maps['custom/world-highres'],
              joinBy: ['iso-a2', 'key'],
              name: 'Random data',
              states: {
                  hover: {
                      color: '#a4edba'
                  }
              },
              dataLabels: {
                  enabled: true,
                  format: '{point.name}'
              }
          }]
    });
  
  });
  </code></pre>
  
  <p><strong>exampleTemplate.html</strong></p>
  
  <pre><code>&lt;template name="exampleTemplate"&gt;
    &lt;div id="country-map-container" style="width:100%; height:400px;"&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Head tag:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="https://code.highcharts.com/mapdata/custom/world-highres.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Here's what it looks like with the code above:</p>
  
  <p><img src="https://i.imgur.com/ifz8Afg.png" alt="screenshot"></p>
  
  <p>I've tried a lot of different things and spent a ton of time on this but nothing I've tried seems to make it work... Any help with this would be extremely appreciated.</p>