CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
OscarHMG
OscarHMG

Reputation: 43

Problems with map: draw route with 2 coordinates

Sorry if it's something that has already been asked before. I want to load a map with 2 markers, starting and destination. When establishing 2 markers, I drew the path to follow (Mode: Drive).

When I choose 2 markers, I get this error: "Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object" Please, help me with this!

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

<script>
        var map;
        var cont=0;
        var directionsService = new google.maps.DirectionsService();
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
            };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        google.maps.event.addListener(map, "click", daclick);


        function daclick(evento){
            //var cont=0;  
            if(cont==0){
                var latitudOrigen = evento.latLng.lat();
                var longitudOrigen = evento.latLng.lng();
                var myLatlngOrigen = new google.maps.LatLng(latitudOrigen,longitudOrigen);
                var markerOrigen = new google.maps.Marker({
                    position: myLatlngOrigen,
                    map: map,
                    title: "Origen"
  }); 
                cont=1;
            }else{
            var latitudDestino = evento.latLng.lat();
            var longitudDestino = evento.latLng.lng();
            var myLatlngDestino= new google.maps.LatLng(latitudDestino,longitudDestino);
            var markerDestino = new google.maps.Marker({
                    position: myLatlngDestino,
                    map: map,
                    title: "Destino"
  }); 
            cont=0;
      }

        var request = {
            origin:latitudOrigen,
            destination:myLatlngDestino,
            travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
}); 

        }

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Upvotes: 0

Views: 566

Answers (3)

geocodezip
geocodezip

Reputation: 161334

I get this javascript error with your code: Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object. For a number of reasons:

    var request = {
        origin: latitudOrigen,
        destination: myLatlngDestino,
        travelMode: google.maps.TravelMode.DRIVING
    };
  1. latitudOrigen is not a google.maps.LatLng object (it is a single number, the latitude of the origin).
  2. myLatlngOrigen is out of scope on the second click

the simplest fix is to make your markers global, then get the position of the marker when you go to run the directions service:

        var request = {
            origin: markerOrigen.getPosition(),
            destination: markerDestino.getPosition(),
            travelMode: google.maps.TravelMode.DRIVING
        };

  • you also need to move the call of the DirectionsService inside the else of the click event handler function, as it won't work until you have both a origin and a destination.

    } else {
    var myLatlngDestino = evento.latLng;
    markerDestino = new google.maps.Marker({
        position: myLatlngDestino,
        map: map,
        title: "Destino"
    });
    var request = {
        origin: markerOrigen.getPosition(),
        destination: markerDestino.getPosition(),
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
    cont = 0;
}

Then I get: Uncaught ReferenceError: directionsDisplay is not defined, because you don't initialize a directionsDisplay object.

Once I define that it works.

working fiddle

code snippet:

var map;
var cont = 0;
var directionsService = new google.maps.DirectionsService();
var markerOrigen = null;
var markerDestino = null;
var directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);

  google.maps.event.addListener(map, "click", daclick);


  function daclick(evento) {
    //var cont=0;  
    if (cont == 0) {
      var myLatlngOrigen = evento.latLng;
      markerOrigen = new google.maps.Marker({
        position: myLatlngOrigen,
        map: map,
        title: "Origen"
      });
      cont = 1;
    } else {
      var myLatlngDestino = evento.latLng;
      markerDestino = new google.maps.Marker({
        position: myLatlngDestino,
        map: map,
        title: "Destino"
      });
      var request = {
        origin: markerOrigen.getPosition(),
        destination: markerDestino.getPosition(),
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
      cont = 0;
    }
  }

}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Upvotes: 2

CodeSlayer
CodeSlayer

Reputation: 1327

i think it's because of this

var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING };

the origin and destination is not accepting latitude and longtitude. try converting your latitude in address. use geocode to do that. and after that, i think your code will work

click this if you want to see the sample code

Upvotes: 0

ExodusLight
ExodusLight

Reputation: 5

Try using a wrapper class, those are not objects you are sending the function. Maybe you are sending the function raw numbers.

Upvotes: 0

Related Questions