title: mapbox not initializing due to template
body: <p>I am trying to initialise MapBox but console throw an error 
  "Uncaught Error: Container 'map' not found."</p>
  
  <p>I am working with templates which I believed is the issue whereby Mapbox is unable to query the element that is being specified in my html due to some reason. I am fairly new to using template and my context is it fragments the HTML page. Hoping that someone that is experience in it can assist me on this. Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        mapboxgl.accessToken = 'MYAPIKEY';
          var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v9',
          interactive: true,
          dragRotate: true,
          doubleClick: true
          });
  
  
          // THIS TRACK'S USER LOCATION IN REAL-TIME USING USER'G GroupSchool
          map.addControl(new mapboxgl.GeolocateControl({
          positionOptions: {
          enableHighAccuracy: true
          },
          trackUserLocation: true
          }));
          //IF I CHANGE THIS URL TO PHP THAT CONTAINS THE GEOJSON FORMAT
          var url = http://xxxx.geojson;
        
  
  
          map.on('load', function () {
              window.setInterval(function() {
                  map.getSource('drone').setData(url);
              }, 2000);
  
              map.addSource('drone',
              {
                type: 'geojson',
                data: url
              });
  
              map.addLayer({
                  "id": "drone",
                  "type": "symbol",
                  "source": "drone",
                  "layout": {
                      "icon-image": "rocket-15"
                  }
              });
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          &lt;template id="home.html"&gt;
              &lt;ons-page&gt;
                  &lt;!-- Toolbar--&gt;
                  &lt;ons-toolbar&gt;
                      &lt;div class="left"&gt;
                          &lt;ons-toolbar-button onclick="fn.open()"&gt;
                              &lt;ons-icon icon="md-menu"&gt;&lt;/ons-icon&gt;
                          &lt;/ons-toolbar-button&gt;
                      &lt;/div&gt;
                      &lt;div class="center"&gt;
                      &lt;/div&gt;
                  &lt;/ons-toolbar&gt;
  
                  &lt;div id='map' class='container'&gt;&lt;/div&gt;
  
  
  
              &lt;/ons-page&gt;
  
  
          &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>