title: Google Maps v3 - Uncaught TypeError: Cannot read property 'Marker' of undefined
body: <p>I have my map <code>div</code> container always on the page:</p>
  
  <pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>at first I was trying to append this to the DOM in the ajax callback aswell but was having troubles so decided to make it static for now.</p>
  
  <p>I am trying to initialise the map from a jquery ajax callback</p>
  
  <pre><code>...
  complete: function(data) {
      // build the map
      $.getScript("http://maps.google.com/maps/api/js?v=3&amp;libraries=geometry&amp;sensor=false&amp;region=uk&amp;async=2&amp;callback=MapApiLoaded", function () {});     
      running = false;
  
      if(running) return false;
      running = true;
      setMarkers();
      flightPath.setMap(null); // Remove polyline
      flightPathProgress.setMap(null); // Remove polyline
  
      setTimeout(function() {
          flightPath.setMap(map);
          flightPathProgress.setMap(map);
          flightPathProgress.setOptions({
              strokeOpacity: 0
      });
  
      var progress = 0;
      var intvl = setInterval(function(){
          progress += 0.01;
          if(progress &gt; 1) { 
              clearInterval(intvl);
              running = false;
           } else {
  
           }
  
           // Calc progress
           var progressLatLng = google.maps.geometry.spherical.interpolate(userlatlng, serverlatlng, progress);
           // Update polyline
           flightPathProgress.setOptions({
               strokeOpacity: progress,
               path: [userlatlng, progressLatLng]
           });
       }, 50);
       }, 1000);
   }
  </code></pre>
  
  <p>I also have the following outside of the document ready function</p>
  
  <pre><code>var map;
  var serverlatlng;
  var userlatlng;
  var servermarker;
  var usermarker;
  var flightPath;
  var flightPathProgress;
  var running;
  
  function MapApiLoaded() {
      serverlatlng = new google.maps.LatLng(34.0625, -118.123);
      userlatlng = new google.maps.LatLng(54.167, -4.48211);
      var centerlatlng = new google.maps.LatLng(44.0835, -61.241055);
  
      // Create the map
      var myOptions = {
          center: centerlatlng,
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          panControl: false,
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false
       };
  
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
       // Centre map on user and server locations
       var bounds = new google.maps.LatLngBounds();
       bounds.extend(serverlatlng);
       bounds.extend(userlatlng);
       map.fitBounds(bounds);
  
       // The grey outline path
       flightPath = new google.maps.Polyline({
           path: [userlatlng,serverlatlng],
           strokeColor: "#666",
           strokeOpacity: 0.5,
           strokeWeight: 4,
           geodesic: true,
           zIndex: 1
        });
  
        // The red progress path
        flightPathProgress = new google.maps.Polyline({
            path: [userlatlng,userlatlng],
            strokeColor: "#ff0000",
            strokeOpacity: 0,
            strokeWeight: 4,
            geodesic: true,
            zIndex: 2
        });
  }
  
  function setMarkers() {
      if(servermarker != undefined) servermarker.setMap(null); // Remove marker if exists
      servermarker = new google.maps.Marker({
      position: serverlatlng, 
      map: map, 
      title:"Server",
      animation: google.maps.Animation.DROP,
      icon: 'images/marker.png'
  });  
  
      if(usermarker != undefined) usermarker.setMap(null); // Remove marker if exists
      usermarker = new google.maps.Marker({
          position: userlatlng, 
          map: map, 
          title:"User",
          animation: google.maps.Animation.DROP,
          icon: 'images/marker.png'
      }); 
  }
  </code></pre>
  
  <p>The error message I am getting is <code>Uncaught TypeError: Cannot read property 'Marker' of undefined</code>.</p>
  
  <p>The full expanded message is</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'Marker' of undefined     
  www.domain.co.uk/:345
  setMarkers www.domain.co.uk/:345
  $.ajax.complete www.domain.co.uk/:242
  fire jquery.js:3064
  self.fireWith jquery.js:3176
  done jquery.js:8259
  </code></pre>
  
  <p>callback`</p>