title: Moving the view area when a button is clicked
body: <p>I'm pulling my hair out over this one!</p>
  
  <p>I've got a map that loads when a button is clicked, I'd like it to then move the map to a new area when one of the other buttons is clicked. However if another button is clicked I get the error 'Map container is already initialized.'</p>
  
  <p>I tried adding a condition in there that pans to a new loctation if the map has already been loaded, but then I get 'Cannot read property 'panTo' of undefined'!</p>
  
  <p>This is how the map loading function looks: </p>
  
  <pre><code>function getMap(selectedArea) {
  if ( mapLoaded ) {
      map.panTo(selectedArea, 10);
  } else {
      $('#map').show();
      $('html, body').animate({ scrollTop: $(document).height () }, 'slow')
  
      var map = L.map('map').setView(selectedArea, 10);
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      }).addTo(map);
  
      mapLoaded = true;
  }
  </code></pre>
  
  <p>The selectedArea just returns an array of coordinates like [33.843970009, -118.170583372] based on the users button click, and the mapLoaded is a global function is set to false at pageload.</p>
  
  <p>Any thoughts? </p>
  
  <p>Thanks very much!</p>
  
  <p>Tayler</p>