JQuery Mobile and Google Maps directions trouble

Question

I'm having a little problme with my code and i don't know what is it. I'm traying to draw the directions between to places but the code doesn't work. I try with this page: https://developers.google.com/maps/documentation/javascript/directions#TravelModes but i can't get it. Thanks ! Here is the code:

    $(document).ready(function() {

        $('#Encuentrame').click(function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(exito, error);
            } else {
                error('El navegador no soporta GeoLocalizacion');
            }
        });
    });  




    function exito(position) {
      var marcadorCasa = new google.maps.LatLng(-34.5688496,-58.4322009); //establece la posicion de un marcador que elijo
      var plazaDeMayo = new google.maps.LatLng(-34.60841643923174,-58.37216913700104);
      var directionsDisplay;
      directionsDisplay = new google.maps.DirectionsRenderer();
      var directionsService = new google.maps.DirectionsService();
      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var myOptions = {
        zoom: 19,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapcanvas = $('#mapcanvas');
      var map = new google.maps.Map(mapcanvas[0], myOptions);
      var marker = new google.maps.Marker({
          position: latlng,
          map: map, 
          title:"Creo que estoy aca !"
      });
      directionsDisplay.setMap(map);
      var lugarCasa = new google.maps.Marker({
        position:marcadorCasa,
        map:map,
        title:"CASA",
        animation: google.maps.Animation.BOUNCE
      });
      var plaza = new google.maps.Marker({
        position:plazaDeMayo,
        map:map,
        animation: google.maps.Animation.BOUNCE,
        title:"Plaza de Mayo"
      });

      var requerimientoDeDirecciones = new google.maps.DirectionsRequest({
        origin: latlng,
        destination: LugarCasa,
        travelMode: google.maps.TravelMode.BICYCLING,
        unitSystem: UnitSystem.METRIC,
      });

      directionsService.route(requerimientoDeDirecciones, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
        }
      });

    }

Answer 1

There are some errors in your code :

• google.maps.DirectionsRequest doesn't really exist. The Google Maps documentation does not indicate any constructor. It should be define as an anonymous object.
• origin and destination have to be google.maps.LatLng or String. That was not the case for LugarCasa in your code.
• You was using UnitSystem.METRIC instead of google.maps.UnitSystem.METRIC.

Here's a working version :

var requerimientoDeDirecciones = {
  origin: latlng,
  destination: marcadorCasa,
  travelMode: google.maps.TravelMode.BICYCLING,
  unitSystem: google.maps.UnitSystem.METRIC
};