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);
        }
      });

    }

score 0 · Accepted Answer · answered Nov 15 '12 at 21:12

0

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
};

answered Nov 15 '12 at 21:12

Alexandre Ardhuin

71,959
15
151
132

Thanks a lot Alexandre Ardhuin ! But the code it is not working with that... the directions are not renderer in the map... someone knows why ? – Alexis Polak Nov 16 '12 at 17:13
I suspect that `TravelMode.BICYCLING` is not available in your country. Try to check what is the value of `status`, I think it is never `DirectionsStatus.OK`. You can also try with `travelMode: google.maps.TravelMode.DRIVING`. – Alexandre Ardhuin Nov 16 '12 at 20:58
You can validate the answer too ;) – Alexandre Ardhuin Nov 19 '12 at 21:45

JQuery Mobile and Google Maps directions trouble

1 Answers1