469,140 Members | 1,118 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,140 developers. It's quick & easy.

Google map routes not showing

Hello! Why can't I get the directions? I'm a beginner and I have no clue where the problem is.

When I open it in the live browser I can see the map but no option to choose routes.



Expand|Select|Wrap|Line Numbers
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  6.     <style type="text/css">
  7.       html { height: 100% }
  8.       body { height: 100%; margin: 0px; padding: 0px }
  9.       #map_canvas { height: 100%; width: 70%; float: left }
  10.       #directionsPanel { height: 100%; width: 30%; float: right }
  11.     </style>
  12.     <title>Google Maps JavaScript API v3 Example: Map Simple</title>
  13.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  14.     <script type="text/javascript">
  15.  
  16.       var map;
  17.  
  18.       function initialize() {
  19.  
  20.         var mapContainer = document.getElementById("map_canvas");
  21.  
  22.         var myLatlng = new google.maps.LatLng(61.96059634727177, 9.485308435018732);
  23.         var myOptions = {
  24.           zoom: 5,
  25.           center: myLatlng,
  26.           mapTypeId: google.maps.MapTypeId.ROADMAP
  27.         }
  28.  
  29.         map = new google.maps.Map(mapContainer, myOptions);
  30.       }
  31.     </script>
  32.     </head>
  33.     <body onload="initialize()">
  34.       <div id="map_canvas"></div>
  35.       <div id="directionsPanel"></div>
  36.       <div id="floating-panel">
  37.       <b>Start</b>
  38.       <select id="start:">
  39.         <option value="Oslo, Norway">Oslo</option>
  40.         <option value="Drammen, Norway">Drammen</option>
  41.         <option value="Jevnaker, Norway">Jevnaker</option>
  42.     </select>
  43.     <b>End</b>
  44.     <select id="End:">
  45.       <option value="Oslo, Norway">Oslo</option>
  46.       <option value="Drammen, Norway">Drammen</option>
  47.       <option value="Jevnaker, Norway">Jevnaker</option>
  48.  
  49.  
  50.     </select>
  51.     </div>
  52.     <div id="map"></div>
  53.     <script>
  54.     function initMap() {
  55.       var directionsService = new google.maps.directionsService();
  56.       var directionsDisplay = new google.maps.DirectionsRenderer();
  57.       var map = new google.maps.Map(document.getElementById("Map"), {
  58.         zoom: 7,
  59.  
  60.       });
  61.       directionsDisplay.setMap(map);
  62.       directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  63.  
  64.       var onChangeHandler = function() {
  65.         calculateAndDisplayRoute(directionsService, directionsDisplay);
  66.  
  67.     };
  68.     document.getElementById('Start').addEventListener('change', onChangeHandler);
  69.     document.getElementById('End').addEventListener('change', onChangeHandler);
  70.  
  71.     }
  72.  
  73.     function calcRoute() {
  74.       var start = document.getElementById("start").value;
  75.       var end = document.getElementById("emd").value;
  76.       var request = {
  77.         origin:start,
  78.         destination:end,
  79.         travelMode: google.maps.DirectionsTravelMode.DRIVING
  80.       };
  81.       directionsService.route(request, function(response, status) {
  82.         if (status == google.maps.DirectionsStatus.OK) {
  83.           directionsDisplay.setDirections(response);
  84.         }else {
  85.           alert("Directions failed:" + status);
  86.  
  87.         }
  88.  
  89.         });
  90.     }
  91.  
  92.  
  93.     </script>
  94.  
  95.     <script async defer>
  96.     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFIr-BLZtLsDVpj7FPXF0NaCnmgoNUmVE"
  97.     </script>
  98.     </body>
  99.  
  100.     </html>
  101.  
Jul 26 '21 #1
2 4002
dev7060
489 Expert 256MB
Hello! Why can't I get the directions? I'm a beginner and I have no clue where the problem is.
I see errors in the code. Syntax error in lines 95, 96. Typo in line 75. Use the browser developer tools to debug the code. Also, make sure the API key is valid.

When I open it in the live browser I can see the map but no option to choose routes.
Did you try scrolling down?
Jul 29 '21 #2
luckybansko
1 Bit
accidently commented sorry~!
Aug 11 '21 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

13 posts views Thread by Mario | last post: by
1 post views Thread by shapper | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Mortomer39 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.