Creating polylines from mysql database in google maps

Question

I am trying to draw a polyline on my custom google maps map with latitudes and longitudes stored in a MYSQL database.

I currently get the geodata like this:

$sql = "SELECT lat, lng from locations where deviceid = '$wert';";
 require_once ('config.php');
    $db_link = mysqli_connect (MYSQL_HOST, 
                       MYSQL_BENUTZER, 
                       MYSQL_KENNWORT, 
                       MYSQL_DATENBANK);
    mysqli_set_charset($db_link, 'utf8');
    $db_erg = mysqli_query( $db_link, $sql );

         if ( ! $db_erg )
            {
                die('Ungültige Abfrage: ' . mysqli_error($db_link));
            }
while( $zeile = mysqli_fetch_array($db_erg, MYSQL_NUM ) ) {
$json[] = $zeile;
}
echo json_encode( $json );?>

My output looks like this:

[["48.20315709","16.27662076"],["48.20315722","16.27662077"],["48.20315721","16.27662077"]]

My problem is that I really do not know how to get those values inside of:

var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
];

I know I need a loop, but I have no clue how to do that. Any help would be so much appreciated...I also know that there are similar questions, but I do not understand the codes posted there.

Answer 1

assign the json output to a javascript variable then you can do the following :

var polylinePlanCoordinates  = [];
 var polyline_data = <?php echo json_encode( $json ); ?>;
 for (var i=0;i< polyline_data.length;i++ ){
  polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i][0], polyline_data[i][1]));
}

var path= new google.maps.Polyline({
  path: polylinePlanCoordinates,
 geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
 });

 path.setMap(map);