0

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>
Improve this question

2 Answers 2

Reset to default
2
  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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.