title: Scope of Google Map variable and calling method
body: <p>I'm playing with the Google Maps API to familiarise myself with JavaScript. I'm a terrible programmer, so please forgive me.</p>
  
  <p>I'm not quite sure why the following code doesn't work, you can check a JSFiddle here: <a href="http://jsfiddle.net/m9QLx/" rel="nofollow">http://jsfiddle.net/m9QLx/</a></p>
  
  <pre><code>var map;
  
  function initialize() {
  
  var myOptions = {
        center : new google.maps.LatLng(34.053228, -118.259583),
        zoom   : 11,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
  
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  };
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  map.panTo(new google.maps.LatLng(37.4569, -122.1569));
  </code></pre>
  
  <p>Everything works fine but I'm not sure why the panTo method doesn't work, as far as I can work out, declaring var map outside of all functions makes it global, I then set map in the initialize() function but outside of this initialize() function the panTo method doesn't work, map appears to be undefined.</p>
  
  <p>I'm sure I'm making a rookie mistake but I can't find an answer (I'm sure I'm Googling the wrong thing).</p>
  
  <p>Thanks if anyone can save my sanity.</p>