CODEWITHSUNDEEP
javascripthtmlapiionic-frameworkdirection
WilliamCoppinger
WilliamCoppinger

Reputation: 1

implementing google maps directions with ionic 1

I followed this tutorial on youtube here: https://www.youtube.com/watch?v=gw3AKC4MsGQ

I have done everything the same but have come to a slight problem as the javascript has been updated since the video was made. Any ideas on what changes should be made to my code to accommodate the changes in the javascript?

This is the HTML:

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>

 <link rel="manifest" href="manifest.json">

 <!-- un-comment this code to enable service worker
 <script>
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('service-worker.js')
       .then(() => console.log('service worker installed'))
       .catch(err => console.log('Error', err));
   }
</script>-->

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMsQzZKDhyiXUMOxllFxi5iBz1tZ1j-mc&callback=initMap">
</script>
<script type="js/direction.js"></script>
<script src="js/app.js"></script>
</head>
  <body ng-app="starter">
    <ion-pane>
  <ion-header-bar class="bar-positive">
    <h1 class="title">Get Directions</h1>
  </ion-header-bar>
  <ion-content>
     <div id="map"></div> 
  </ion-content>
</ion-pane>

And this is the Javascript:

function initMap() {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

Upvotes: 0

Views: 715

Answers (1)

VIVEK GUPTA
VIVEK GUPTA

Reputation: 11

type="js/direction.js", it will be src="js/direction.js"

Upvotes: 1

Related Questions