CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Ismaell Gass
Ismaell Gass

Reputation: 56

Google maps API - google is not defined, asynchronous load of API

I'm trying to make a route using Google Maps API with multiple waypoints.

When I run the page the errors below are raised:

Uncaught ReferenceError: google is not defined(anonymous function) @ test.html:25 Uncaught TypeError: Cannot read property 'route' of undefined test.html:91

<!DOCTYPE html>
    <html>
          <head>
            <style type="text/css">
              html, body { height: 100%; margin: 0; padding: 0; }
              #map { height: 100%; }
            </style>
          </head>
          <body>
            <div id="map"></div>
            <script>
             function loadScript()
             {
             var myKey = "****************-**************-*******";
             var script = document.createElement("script");
             script.type = "text/javascript";
             script.src = "http://maps.googleapis.com/maps/api/js?key="+myKey+"&sensor=false&callback=initialize";
             document.body.appendChild(script);
             }
             window.onload = loadScript;
           </script>
            <script type="text/javascript">

            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();
            </script>

          </body>
        </html>

Upvotes: 0

Views: 3197

Answers (2)

geocodezip
geocodezip

Reputation: 161404

  1. You are loading the API asynchronously, you should only do that if you know what you are doing. All the code that depends on the API needs to be in the callback function (in your case initialize).
  2. You shouldn't call the initialize function before the API is loaded.

working fiddle

code snippet:

// global variables
var directionDisplay;
var directionsService;
var map;


function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;


function initialize() {
  directionsService = new google.maps.DirectionsService();

  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();
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<div id="map"></div>

Upvotes: 2

Ismaell Gass
Ismaell Gass

Reputation: 56

I just have changed the script that imports the Google Maps API for the script below:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>

Upvotes: 0

Related Questions