How to enter polylines in Google maps api v3 with dates saved in the database

Navigation
1

I'm trying to show in google maps api v3 polylines that are stored in my database

Here is the connection to the conf.inc.php database: 

<?php
define('HOST','localhost');
define('USER','xxxx');
define('PASS','xxxxx');
define('DBSA','polilinha');
define('TABLE','marcador');

$link= mysqli_connect(HOST,USER,PASS,DBSA) OR die('ERROR!');
?>

I get the data from my database in this way: 

<?php require '_app/conf.inc.php';

//fazendo a consulta na base de dados'

$Qrcreate = "SELECT *  FROM " . TABLE. "";

$create   = mysqli_query($link,$Qrcreate);

while ($row = mysqli_fetch_assoc($create)) {

vector[] = $row;

}
echo json_encode($vector);
?>

My output looks like this: 

[{"id":"1","lat":"16.8875","lng":"-24.9893"},{"id":"2","lat":"16.8884","lng":"-24.9896"},{"id":"3","lat":"16.889","lng":"-24.9903"},{"id":"4","lat":"16.8891","lng":"-24.9911"}]

My problem is that I do not know how to enter this data in the varial (example): 

var flightPlanCoordinates =[
        {lat:16.88746121,  lng:-24.98925626},
        {lat:16.8883595,  lng:-24.98959154},]

I know I need to loop but I do not know how. I've seen similar post but could not do it, any help please.

    
asked by anonymous 11.10.2016 / 17:22

2 answers

1

Considering that you are using javascript to perform this insertion of points in the API as a PHP language:

In this case I'm only printing the coordinates, but you can use this iteration to insert the points on the map.

On the return page where you will get the JSON output You will do this: 

<script type="text/javascript">
    var pontos = <?php echo json_encode($vector) ?>;
    pontos = JSON.parse(pontos);
    $.each( pontos , function(chave, valor){
        console.log(valor['lat']);
        console.log(valor['lng']);
    });

</script>
    
11.10.2016 / 17:46
0

remembering what I did in separate files Here is the connection to the database, conf.inc.php: 

<?php
define('HOST','localhost');
define('USER','xxxx');
define('PASS','xxxxx');
define('DBSA','polilinha');
define('TABLE','marcador');

$link= mysqli_connect(HOST,USER,PASS,DBSA) OR die('ERROR!');
?>

I get the data from my database in this way, outputjson.php: 

<?php require '_app/conf.inc.php';

//fazendo a consulta na base de dados'

$Qrcreate = "SELECT *  FROM " . TABLE. "";

$create   = mysqli_query($link,$Qrcreate);

while ($row = mysqli_fetch_assoc($create)) {

vector[] = $row;

}
echo json_encode($vector);
?>

My output looks like this: 

[{"id":"1","lat":"16.8875","lng":"-24.9893"},{"id":"2","lat":"16.8884","lng":"-24.9896"},{"id":"3","lat":"16.889","lng":"-24.9903"},{"id":"4","lat":"16.8891","lng":"-24.9911"}]

HTML file containing javascript and google maps: 

<?php
   require 'outpjson.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
 <style >
    html, body { height: 100% ; margin: 0 ; padding: 0 ; }
    #map { height: 100% ; }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>

<title>ExEMPLO INSERINDO POLILINHAS NO GOOGLE MAPS</title>
</head>
<body>
   <div id="map"></div>

<script>
    function initMap(){
       var map = new google.maps.Map(document.getElementById('map'), {

        center : {lat: 16.88627803, lng:-24.98922676 },
        zoom : 18,
        mapTypeId : google.maps.MapTypeId.TERRAIN
        });

    var polilinha_data = <?php echo json_encode($vector) ?> ;

    // polilinha_data = JSON.parse(polilinha_data);
    var polylinePlanCoordinates =[];

    $.each(polilinha_data , function(chave , valor){
      polylinePlanCoordinates.push(  new google.maps.LatLng(valor['lat'], valor['lng']));

   });

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

        });
   path.setMap(map);
}
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=INSEREASUACHAVEAPI&callback=initMap"></script>

</body>
</html>
    
11.10.2016 / 21:23
Concurrent.futures and Class object How to do this? Transition Page within Modal?