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

Question

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>

geocodezip · Accepted Answer · 2015-08-27 03:27:51Z

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).
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>

Ismaell Gass · Accepted Answer · 2015-08-27 01:05:30Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related