Populate map with data from SQL Database using Google Maps javascript API?

Question

What I'm trying to do is to populate routes using the Google Maps API. I've written a working function that takes in any given array of lat/long values, I have a big database coordinates and I want to populate the map with a selection.

How can I get the data into JavaScript? So far I've got a button on the site and when pressed it runs a query that echoes what I need into some new page in JSON format:

$con = mysqli_connect("localhost","root","password","database");

$return_arr = array(); $result = mysqli_query($con,"SELECT * FROM
Flight_Data WHERE  `DepDateTimeUTC` LIKE  '%10/1/13%'");


while ($row = mysqli_fetch_array($result)) {
    $row_array['ID'] = $row['ID'];
    $row_array['OriginLat'] = $row['OriginLat'];
    $row_array['OriginLong'] = $row['OriginLong'];
    $row_array['DestinLat'] = $row['DestinLat'];
    $row_array['DestinLong'] = $row['DestinLong'];

    array_push($return_arr,$row_array); }

$jsonarray = json_encode($return_arr); echo $jsonarray;

This is a sample of the data:

[
    {
    "ID":"1",
    "OriginLat":"48.6899",
    "OriginLong":"9.2220",
    "DestinLat":"37.014425",
    "DestinLong":"-7.965910"
    },
    ....
]

So I need to parse that into an array and be able to access each of the values like masterArray[1][4] etc.

So I'm stuck, the JavaScript is in a separate file, and so is the PHP script, I can put it in the same HTML page but I still don't know how to get it.

Alan · Accepted Answer · 2014-11-28T14:29:14.833

0

The best way would be to use an asynchronous (Ajax) query from your webpage, to pull the data down from your web server in Json format. The end result of this would be all of your data available in a JavaScript variable.

I would recommend using a library like jQuery to do this - have a look at the documentation here: http://api.jquery.com/jquery.ajax/

A basic (untested) example of doing this in jQuery would be:

<script>
    $(document).ready(function() {

        $.ajax("yourpage.php")
            .done(function(data) {
                mydata = data;
            });

    });    
</script>

edited Nov 28 '14 at 14:29

answered Nov 28 '14 at 14:19

Alan

2,962
2
15
18

ahh so using ajax i can get reference the resulting data of the php file and pop it into a variable? so i can just say var a = $jsonarray? for example? and that would be inside the javascript file with the rest of the google maps function? – mekk33 Nov 28 '14 at 14:33
Yes, that's correct. In the 'done' function, you can pass the data variable to whatever JavaScript function you have to populate the map. As long as your PHP page that provides the data returns it in valid JSON format, preferably with a mime type header of "application/json", it should all work well. – Alan Nov 28 '14 at 14:38
This might be helpful: http://stackoverflow.com/questions/4064444/returning-json-from-a-php-script – Alan Nov 28 '14 at 14:40
Iv linked it up and it seems to be working but i can't access the data inside? i used console log and its either blank or undefined – mekk33 Nov 28 '14 at 14:46
I'd suggest using your browser's dev tools debugger (Firefox seems to have the best dev tools, in my opinion) to set a breakpoint on the .done() function, and see what is in the data parameter. – Alan Nov 28 '14 at 15:07
It's also very useful to switch to the network tab in the dev tools, and have a look at exactly what is being sent and received for the Ajax query. – Alan Nov 28 '14 at 15:08
thanks man il give it a shot, your a credit to stack overflow community – mekk33 Nov 28 '14 at 15:23

Populate map with data from SQL Database using Google Maps javascript API?

1 Answers1