Using MySQL data with Google Maps API

Question

I'm working with a .php file containing HTML, PHP and Javascript and a table named data in MySQL which contains GPS info ordered by date. I'm using the following code so an user can type a date in a form.

    <form method="POST">
        <div class="col-sm-12">
            <p>
                <label for="route_date_ids">Insert date</label>
                <input name="route_date_id"></input>
            </p>
        </div>
        <div class="col-sm-12">
            <p>
                <input type="submit" value="View route"/>
            </p>
        </div>
    </form>
<?php if (isset($_POST['route_date_id'])) : ?>
<?php
$query = "SELECT * FROM data WHERE measured_at LIKE ". $_POST['route_date_id'];
$result = mysqli_query($conn, $query);

so once the user type a date and press the button, on the server side, I get the data whose date starts with the characters the user typed. My objetive now is to pass that information ($result, which contains latitude and longitude data) to the following function.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: 'terrain'
    });
    var flightPlanCoordinates = [
        {lat: 37.772, lng: -122.214},
        {lat: 21.291, lng: -157.821},
        {lat: -18.142, lng: 178.431},
        {lat: -27.467, lng: 153.027}
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

so when the page is reloaded after the submit, the map shows the coordinates corresponding to the date the user typed.

I cannot solve this last question. Any help would be appreciated.

Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). — Alex Howansky, May 26 '17 at 15:02
When you check result from query, create a javascript variable, and read it from initmap function or another one. If you need dynamic update, use jquery to request the data, send it as a json to the client, and parse / process it with javascript. — Sakura Kinomoto, May 26 '17 at 15:29
@Sakura Kinomoto how can I create a javascript variable containing the result from the query and read it from initMap? Sorry for the question, I'm kinda newbie to Javascript and PHP! — Eduardo, May 26 '17 at 15:50
From PHP, you can generate javascript directly. Use any function to parse the results of the $result var to a string, and then, use echo ""; to get the variable on javascript space. — Sakura Kinomoto, May 26 '17 at 15:58

Vrajesh Doshi · Answer 1 · 2017-05-26T16:51:04.280

Give you form an id as follows:

    <form id = "form">

Give id even to the input field as follows (Remember input tag is a stand alone tag, it doesn't have closing tag)

    <input name="route_date_id" id = "route_date_id">

Declare the variable 'map' outside the initMap() method as shown in the script below and create a separate file called 'data_fetcher.php' to which ajax call will be made passing date value which can be accessed as $_POST['date_value'] in date_fetcher.php file, then write the logic to fetch the lat, lng data corresponding to the date. Once obtained the result, store it in an array, then json_encode the result and then echo it so that it will be returned in response to the ajax call. Observe the comment in the following script where the lat, lng obtained in the result needs to be stored in an array. Also don't forget to include jquery library.

var map;
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
});
google.maps.event.addDomListener(document.getElementById('form'), 'submit', function(e) {
    var date_data = document.getElementById('route_date_id').value;
    $.ajax({
    url:"data_fetcher.php",
    type:"POST",
    data: {date_value:date_data},        
    dataType: 'json',
    success: function(respond){


 //In the respond you will get the coordinates add them to the array, 'flightPlanCoordinates' then


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

        flightPath.setMap(map);        
    console.log("AJAX level request was successful");
    },
    error: function(){
    console.log("AJAX level request was a failure");
    }
});

Happy Coding!!!

Not much into AJAX, but been working on it for the last couple of days and finally made it. Outstanding response. — Eduardo, May 28 '17 at 18:00

Using MySQL data with Google Maps API

1 Answers1