How to introduce polylines in google maps api v3 with dates saved in the database

Asked

Viewed 99 times

1

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

Here is the connection with 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 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 appears this way:

[{"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 don’t know how to enter this data into the variable (example):

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

I know I need to loop, but I don’t know how. I have seen similar post but could not do, any help please .

php javascript mysql json

  • http://meta.pt.stackoverflow.com/questions/5389 ;-)

  • Hello, welcome to the site. If any of the answers below solved your problem, you can mark her as accepted. Here we do not put "SOLVED" in the title (see the link above).

2 answers

1


Taking into account that you are using javascript to perform this insertion of points in the API , as PHP language:

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

On the return page where you will receive the JSON output You will do so: 

<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>

  • And remembering that you should have the jquery bilbioteca included in your project.

  • thanks guy worked, I’ll post the code there, thanks, remembering that I did with 3 files 2 php and 1 html. thanks

0

remembering that I did it in separate files Here is the connection with 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 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 appears this way:

[{"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= INSERE A SUACHAVE API&callback=initMap"></script>

</body>
</html>

Browser other questions tagged php javascript mysql json

You are not signed in. Login or sign up in order to post.