title: Waypoints in Google Maps: InvalidValueError: in property waypoints: at index 0: unknown property lat
body: <p>I'm currently working with the maps api in combination with asp.net mvc5.
  My Controller is passing position-data to my view like this:</p>
  
  <pre><code>ViewBag.Origin = JsonConvert.SerializeObject(origin);
  ViewBag.Destination = JsonConvert.SerializeObject(destination);
  ViewBag.PositionEntries = JsonConvert.SerializeObject(mapsPositions);
  </code></pre>
  
  <p>Inside the view I'm calling my js-file and pass the values of the Viewbags to it.</p>
  
  <pre><code>&lt;script&gt;
  var origin = @Html.Raw(ViewBag.Origin)
  var destination = @Html.Raw(ViewBag.Destination)
  var mapsPositions = @Html.Raw(ViewBag.PositionEntries)
  &lt;/script&gt;
  &lt;script&gt;
  initMap(origin, destination, mapsPositions);
  &lt;/script&gt;
  </code></pre>
  
  <p>The javascript file:</p>
  
  <pre><code>var initMap = (function (origin, destination, mapsPositions) {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var origin = origin;
  var destination = destination;
  var mapsPositions = mapsPositions;
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 }
  });
  directionsDisplay.setMap(map);
  
  
  calculateAndDisplayRoute(directionsService, directionsDisplay, origin, destination, mapsPositions);})
  
  function calculateAndDisplayRoute(directionsService, directionsDisplay, origin, destination, mapsPositions) {
  var waypts = mapsPositions;
  
  
  directionsService.route({
      origin: origin,
      destination: destination,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
  }, function (response, status) {
      if (status === 'OK') {
          directionsDisplay.setDirections(response);
          var route = response.routes[0];
          var summaryPanel = document.getElementById('directions-panel');
          summaryPanel.innerHTML = '';
          // For each route, display summary information.
          for (var i = 0; i &lt; route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '&lt;b&gt;Route Segment: ' + routeSegment +
                  '&lt;/b&gt;&lt;br&gt;';
              summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
              summaryPanel.innerHTML += route.legs[i].end_address + '&lt;br&gt;';
              summaryPanel.innerHTML += route.legs[i].distance.text + '&lt;br&gt;&lt;br&gt;';
          }
      }
      else {
          window.alert('Directions request failed due to ' + status);
      }
  });
  };
  </code></pre>
  
  <p>The Json-object:</p>
  
  <pre><code>[{"lat":54.1766472,"lng":9.092599,"stopover":false},{"lat":54.1700745,"lng":9.090693,"stopover":false},{"lat":54.1973152,"lng":9.045031,"stopover":false},{"lat":54.27517,"lng":9.00978851,"stopover":false},{"lat":54.4802246,"lng":9.087988,"stopover":false}]
  </code></pre>
  
  <p>So Google is saying:</p>
  
  <pre><code>// The below line is equivalent to writing:
  // position: new google.maps.LatLng(-34.397, 150.644)
  position: {lat: -34.397, lng: 150.644},
  </code></pre>
  
  <p>Now I'm getting the error:
  InvalidValueError: in property waypoints: at index 0: unknown property lat.
  Does it matter if the property is in quotation marks? Or am I missing something?
  Thanks for your help.</p>