title: Uncaught TypeError: Cannot call method 'panTo' of undefined
body: <p>I'm occasionally seeing a javascript error (Uncaught TypeError: Cannot call method 'panTo' of undefined) when loading my website. My website, for reference, is <a href="http://www.nolofo.com" rel="nofollow">www.nolofo.com</a>. What is supposed to happen when you load that page is to determine your location and move the map to that location. Sometimes this works just fine, other times it does not. I can't seem to figure out the pattern other than when it doesn't work I see this error message in the javascript log. Perhaps something is not being loaded in the correct order?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  // Check to see if this browser supports geolocation.
  if (navigator.geolocation) {
  
      // This is the location marker that we will be using on the map. Let's store a reference to it here so that it can be updated in several places.
      var locationMarker = null;
      var myLat = null;
      var myLng = null;
  
      // Get the location of the user's browser using the native geolocation service.
      navigator.geolocation.getCurrentPosition(
          function (position) {
  
              // Check to see if there is already a location. There is a bug in FireFox where this gets invoked more than once with a cached result.
              if (locationMarker){
                  return;
              }
  
              // Log that this is the initial position.
              console.log( "Initial Position Found" );
  
              // Assign coordinates to global variables
              myLat = position.coords.latitude;
              myLng = position.coords.longitude;
  
              moveToLocation(myLat, myLng);
  
          }
  
      );
  
  }
  
  // Start the Google Maps implementation
  var map;
  var markersArray = [];
  function initialize() {
      var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(40.760779, -111.891047),
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          scaleControl: true
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
      // Add all recent listing markers to map
      &lt;?php
          foreach ($coordinateArray as $Key =&gt; $Value) {
  
          $listingQuery = mysql_query("
              SELECT
                  Listings.Lat,
                  Listings.Lng,
                  Listings.Title,
                  Listings.Type
              FROM
                  Listings
              WHERE
                  Listings.ID='$Key'
          ");
          if (!$listingQuery) {
              die('&lt;p&gt;Error executing query (2) with database!&lt;br /&gt;'.
              'Error: ' . mysql_error() . '&lt;/p&gt;');
          }
          $listingArray = mysql_fetch_array($listingQuery);
              $ListingLat = $listingArray["Lat"];
              $ListingLng = $listingArray["Lng"];
              $ListingTitle = addslashes($listingArray["Title"]);
              $ListingType = $listingArray["Type"];
  
          $ListingLatLng = $ListingLat . ", " . $ListingLng;
  
      ?&gt;
      // Marker
      var myLatLng = new google.maps.LatLng(&lt;?=$ListingLatLng?&gt;);
      var marker&lt;?=$Key?&gt; = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: ""
      });
      iconFile = 'http://maps.google.com/mapfiles/ms/icons/&lt;?=$Value?&gt;-dot.png'; 
      marker&lt;?=$Key?&gt;.setIcon(iconFile);
  
      // Info Window
      var infowindow&lt;?=$Key?&gt; = new google.maps.InfoWindow({
          content: '&lt;b&gt;&lt;?=$ListingType?&gt;&lt;/b&gt;&lt;br /&gt;&lt;a href="/listing.php?ID=&lt;?=$Key?&gt;"&gt;&lt;?=$ListingTitle?&gt;&lt;/a&gt;'
      });
      google.maps.event.addListener(marker&lt;?=$Key?&gt;, 'click', function() {
          infowindow&lt;?=$Key?&gt;.open(map, marker&lt;?=$Key?&gt;);
      });
      &lt;?php } ?&gt;
  
      // Add a click event handler to the map object
      google.maps.event.addListener(map, "click", function(event) {
          // Place a marker
          placeMarker(event.latLng, event.latLng.lat(), event.latLng.lng());
  
          // Display the lat/lng in your form's lat/lng fields
          //document.getElementById("lat").value = event.latLng.lat();
          //document.getElementById("lng").value = event.latLng.lng();
      });
  
      // Add a click event handler to the marker object
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent("Your content here");
          infowindow.open(map, this);
      });
  
  }
  
  function placeMarker(location, lat, lng) {
      // Remove all markers if there are any
      deleteOverlays();
  
      var marker = new google.maps.Marker({
          position: location, 
          map: map
      });
  
      // Add marker in markers array
      markersArray.push(marker);
  
      var contentString = '&lt;a href="/post/start.php?Lat=' + lat + '&amp;Lng=' + lng + '"&gt;New Listing&lt;/a&gt;';
  
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
  
      infowindow.open(map,marker);
  
      google.maps.event.addListener(infowindow, "closeclick", function() {
          deleteOverlays(); // removes the marker
      });
  
      //map.setCenter(location);
  }
  
  // Deletes all markers in the array by removing references to them
  function deleteOverlays() {
      if (markersArray) {
          for (i in markersArray) {
              markersArray[i].setMap(null);
          }
          markersArray.length = 0;
      }
  }
  
  function moveToLocation(lat, lng) {
      var center = new google.maps.LatLng(lat, lng);
      map.panTo(center);
  }
  
  // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
  function linkClick(id){
      google.maps.event.trigger(markersArray[id], 'click');
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p></p>