title: Google maps API - google is not defined, asynchronous load of API
body: <p>I'm trying to make a route using Google Maps API with multiple waypoints.</p>
  
  <p>When I run the page the errors below are raised:</p>
  
  <blockquote>
    <p><code>Uncaught ReferenceError: google is not defined(anonymous function) @ test.html:25
    Uncaught TypeError: Cannot read property 'route' of undefined test.html:91</code></p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
            &lt;head&gt;
              &lt;style type="text/css"&gt;
                html, body { height: 100%; margin: 0; padding: 0; }
                #map { height: 100%; }
              &lt;/style&gt;
            &lt;/head&gt;
            &lt;body&gt;
              &lt;div id="map"&gt;&lt;/div&gt;
              &lt;script&gt;
               function loadScript()
               {
               var myKey = "****************-**************-*******";
               var script = document.createElement("script");
               script.type = "text/javascript";
               script.src = "http://maps.googleapis.com/maps/api/js?key="+myKey+"&amp;sensor=false&amp;callback=initialize";
               document.body.appendChild(script);
               }
               window.onload = loadScript;
             &lt;/script&gt;
              &lt;script type="text/javascript"&gt;
  
              var directionDisplay;
              var directionsService = new google.maps.DirectionsService();
              var map;
  
              function initialize() {
                  directionsDisplay = new google.maps.DirectionsRenderer({
                      suppressMarkers: true
                  });
  
                  var myOptions = {
                      zoom: 3,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                  }
  
                  map = new google.maps.Map(document.getElementById("map"), myOptions);
                  directionsDisplay.setMap(map);
                  calcRoute();
              }
  
              function calcRoute() {
  
                  var waypts = [];
  
                  stop = new google.maps.LatLng(51.943571, 6.463856)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
                  stop = new google.maps.LatLng(51.945032, 6.465776)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
                  stop = new google.maps.LatLng(51.945538, 6.469413)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
                  stop = new google.maps.LatLng(51.947462, 6.467941)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
                  stop = new google.maps.LatLng(51.945409, 6.465562)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
                  stop = new google.maps.LatLng(51.943700, 6.462096)
                  waypts.push({
                      location: stop,
                      stopover: true
                  });
  
                  start = new google.maps.LatLng(51.943382, 6.463116);
                  end = new google.maps.LatLng(51.943382, 6.463116);
  
                  createMarker(start);
  
                  var request = {
                      origin: start,
                      destination: end,
                      waypoints: waypts,
                      optimizeWaypoints: true,
                      travelMode: google.maps.DirectionsTravelMode.WALKING
                  };
  
                  directionsService.route(request, function (response, status) {
                      if (status == google.maps.DirectionsStatus.OK) {
                          directionsDisplay.setDirections(response);
                          var route = response.routes[0];
                      }
                  });
              }
  
              function createMarker(latlng) {
  
                  var marker = new google.maps.Marker({
                      position: latlng,
                      map: map
                  });
              }
  
              initialize();
              &lt;/script&gt;
  
            &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>