Trying to display Google Maps Directions with Geol

Question

So I'm still relatively new to Meteor, and this will be my first Meteor project using an external API, and I'm running into a few issues. I've made web apps using the maps api before, and have had no problem displaying directions, but for some reason I'm having a lot of issue with Meteor. I have no problem getting the map to actually display a users current position, and map styling is the way I want it, but when it comes to the part where the user inputs directions, nothing happens. The map doesn't update, and I'm left just staring at the the current location. I'm using the packages jeremy:geocomplete dburles:google-maps and mdg:geolocation.

Here are the templates which create the map, and take user input for the destination:

<template name="map">
  <div class="map-container">
    {{#unless geolocationError}}
      {{> googleMap name="map" options=mapOptions}}
    {{else}}
      Geolocation failed: {{geolocationError}}
    {{/unless}}
  </div>
</template>

<template name="greeting">
  <div class="greet-overlay">
    <div class="greet-window">
      <div class="splash-window">
        <p class="splash-text">Text</p>
        <img class="splash" src="splash/PClogo.png" alt="Lorem Ipsum">
        {{> addressForm}}
      </div>
    </div>
  </div>
</template> 

<template name="addressForm">
  <div class="form-window">
    <img src="game/directions.png" id="stuff">
    <h1 class="address-title">Enter Destination</h1>
    <input type="text"  id="address" name="text" />
    <button>Submit</button>
  </div>
</template>

And here are the events and helpers for those templates (leaving out all the geocode stuff for now):

Template.map.helpers({
geolocationError: function() {
  var error = Geolocation.error();
  return error && error.message;
},
  mapOptions: function() {
    var latLng = Geolocation.latLng();
    // Initialize the map once we have the latLng.
    if (GoogleMaps.loaded() && latLng) {
      return {
        center: new google.maps.LatLng(LAT, LNG),
        zoom: MAP_ZOOM
      };

    }
  }
});

Template.map.onCreated(function() {
  map = GoogleMaps.ready('map', function(map) {
    var latLng = Geolocation.latLng();
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(LAT, LNG),
      map: map.instance,
      icon: '/game/loc_marker.png'
    });
  });
});

Template.addressForm.onRendered(function() {
  this.autorun(function () {
    if (GoogleMaps.loaded()) {
      $("input").geocomplete()
        .bind("geocode:result", function(event, result){
          DESTLAT = result.geometry.location.lat();
          DESTLNG = result.geometry.location.lng();
        });
    }
  });
});

Template.addressForm.events({
  'click button': function() {
        directionsService = new google.maps.DirectionsService;
        directionsDisplay = new google.maps.DirectionsRenderer;

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: LAT + ',' + LNG,
            destination: DESTLAT + ',' + DESTLNG,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            } else {
                console.log('Directions request failed due to ' + status);
              }
          });
        }
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    $(".greet-overlay").toggle();
    }
});

So yeah, basically everything works exactly the way I want it to, except for the directions. Not even the status responses are being logged to the console. I have no doubt I'm doing something so utterly foolish here that it's going to make me seriously question my career choices. Mistakes are probably being made, and I will learn from them.

Answer 1

Figured it out after some toying around! So essentially all I had to do was move some stuff around as I was initializing some things in the wrong order. I moved thecalculateAndDisplayRoute function out of the addressForm event template, and swapped the contents of map.onCreated with addressForm.onRendered. Now it is structured something like this:

function calculateAndDisplayRoute(service, display) {
    directionsService.route({
      origin: LAT + ',' + LNG,
      destination: DESTLAT + ',' + DESTLNG,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
          console.log('Directions request failed due to ' + status);
        }
    });
  }

emplate.map.helpers({
geolocationError: function() {
  var error = Geolocation.error();
  return error && error.message;
},
  mapOptions: function() {
    var latLng = Geolocation.latLng();
    // Initialize the map once we have the latLng.
    if (GoogleMaps.loaded() && latLng) {
      return {
        center: new google.maps.LatLng(LAT, LNG),
        zoom: MAP_ZOOM,
      };
    }
  }
});

Template.map.onCreated(function() {

  this.autorun(function () {
    if (GoogleMaps.loaded()) {
      $("input").geocomplete()
        .bind("geocode:result", function(event, result){
          DESTLAT = result.geometry.location.lat();
          DESTLNG = result.geometry.location.lng();

          directionsService = new google.maps.DirectionsService;
          directionsDisplay = new google.maps.DirectionsRenderer;
        });
    }
  });
});

Template.addressForm.onRendered(function() {
  GoogleMaps.ready('map', function(map) {
    var latLng = Geolocation.latLng();
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(LAT, LNG),
      map: map.instance,
      icon: '/game/loc_marker.png'
    });
  });
});

Template.addressForm.events({
  'click button': function() {
      var map = GoogleMaps.maps.map.instance;
      calculateAndDisplayRoute(directionsService, directionsDisplay);
      directionsDisplay.setMap(map);
      $(".greet-overlay").toggle();
    }
});