CODEWITHSUNDEEP
phpjavascriptjsongoogle-maps
Mark Harrison
Mark Harrison

Reputation: 53

Cannot populate JSON request with correctly formatted data

I am trying to populate JSON request with the data coming back from my phpsearch.php file (shown here)

<?php
include "base.php";
$name = $_GET["name"];
$query = "SELECT lat, lng FROM markers WHERE name = '".$name."'";
$result = mysql_query($query);
$json = array();
while($row = mysql_fetch_array ($result))     
{
  $bus = array(
        'lat' => $row['lat'],
        'lng' => $row['lng']
    );
    array_push($json, $bus);
}
$jsonstring = json_encode($json);
echo $jsonstring;
?>

The data shows in the console in this format:

[{"lat":"37.730267","lng":"-122.498589"}]

The route calculation function is at the bottom of the question, I previously had used an asynchronous JSON rewquest but this was causing the code to execjte before the origin value was set, now it is being set but it looks incorrect

How can I make sure my latitude and longitude results are in the correct JSON format? currently the JSON request looks like this:

 Request URL:https://maps.googleapis.com/maps/api/js/DirectionsService.Route?4b0&5m4&1m3&1m2&1dNaN&2dNaN&5m4&1m3&1m2&1d37.738029&2d-122.499481&6e1&8b1&12sen-GB&100b0&102b0&callback=_xdc_._1rqnjk&token=80599

Route calculation code:

  function calcRoute() {
        var startname = document.getElementById('start').value;
        var endname = document.getElementById('end').value;
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected == true) {
            waypts.push({
                location:checkboxArray[i].value,
                stopover:true});
          }
        }

$.ajax({
    url:'phpsearch2.php', 
    dataType:'html', 
    data:{name:startname},
    async:false,
    success:function (result)
{
    console.log(result)
    origin = new google.maps.LatLng(result[0].lat, result[0].lng);
}});

    var end = new google.maps.LatLng('37.738029', '-122.499481');
    var request = {
            origin: origin,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };

            directionsService.route(request, function(response, status) {
        document.write('<b>'+ origin +'</b>');
          if (status == google.maps.DirectionsStatus.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 < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Time for a Walkabout </b><br>';
              summaryPanel.innerHTML += '<b>From ' + startname + '   </b>';
              summaryPanel.innerHTML += '<b>to ' + endname + '('+ route.legs[i].distance.text +')</b><br>';
          } 
          }
        });
     }

Upvotes: 0

Views: 153

Answers (1)

user788472
user788472

Reputation:

The LatLng constructor takes two numbers as arguments, you're passing it a JSON object. Get the latitude and longitude properties out and pass the numbers directly, like this:

function (result){
    origin = new google.maps.LatLng(result[0].latitude, result[0].longitude);
}

I'm guessing on the specific properties, you may want to console.log(result) to see the exact object structure.

Upvotes: 1

Related Questions