Show results on Google Maps from search query

Question

I'm working on a Google Maps App, but I ran into a problem. I'm using the google maps api to create a map, based on the database values which I saved in my database. I can get them out and show the multiple locations on the map. I am using the $.getJSON function to get the page where the query is stored:

    $.getJSON("get_markers.php",{
        format: "json",
        dataType: 'json',
        contentType: "application/json; charset=utf-8"},
        function(json)
        {
            addMarkers(json);
            console.log(json);
        });
     }

The PHP file:

    <?php 
require 'functions/functions.php'; 

$conn = connect_to_db(); 

$response = array();
$query = get_post_by_cat('bedrijven', 'ict', $conn); 
foreach ($query as $post) {

$response[] = array(
    'name' => $post['naam'],
    'lat' => $post['latitude'],
    'lng' => $post['longtitude'],
);
}
echo json_encode($response);

?>

Point is, this works great. However, I want it to work when someone is using the search bar. So I created that, and it I can get the data and JSON data perfectly. But the map is not even showing. I dug into my console and ran accross the status code 304, which I found out after some research, means that I'm doing too many requests to the API's I am using. I tried this:

 $.getJSON("search.php",{
    format: "json",
    dataType: 'json',
    contentType: "application/json; charset=utf-8"},
    function(json)
    {
        addMarkers(json);
        console.log(json);
    });
 }

The search PHP file:

<?php 

require 'functions/functions.php'; 

$conn = connect_to_db(); 

if(isset($_POST['submit']))
{ 
  $search = $_POST['query']; 
  echo $search;

  $query = get_post_by_cat('bedrijven', $search, $conn); 

    if ($query)
    {
        foreach ($query as $post)
        {
            ?> <h1 id="test"><?php echo $post['naam'] ?></h1> 
                   <p><?php echo $post['plaats'] ?></p> 
                   <p><?php echo $post['categorie'] ?></p> 
                   <?php
        }


    }
    else 
    {
        echo 'error';
    }

}


?>

This gives me the 304 Status. I think I can understand why, because it is trying to request the maps and the jQuery multiple times.

jquery.min.map
ajax.googleapis.com/ajax/libs/jquery/1.10.2
GET
304
Not Modified

jquery.js
ajax.googleapis.com/ajax/libs/jquery/1.10.2
GET
304
Not Modified

How can I solve this? Seriously, thanks a bunch if this is solved. I hope this will be useful in future.

Answer 1

Excellent news. I found it out myself!

This should not be the best way to do it, I think, but it worked for me. I translated The POST query from the search bar to javascript, and send it as an parameter to the file where the data out of the database becomes JSON.

var query = '<?php echo json_encode($_POST["query"]); ?>';


    $.getJSON("get_markers.php?s=" + query,{
        format: "json",
        dataType: 'json',
        contentType: "application/json; charset=utf-8"},
        function(json)
        {
            addMarkers(json);
            console.log(json);

        });
     }

Then in the get_markers file:

<?php 
require 'functions/functions.php'; 

$conn = connect_to_db(); 
$search = $_GET['s'];
$response = array();
$query = get_post_by_cat('bedrijven', $search, $conn); 

foreach ($query as $post) {
    $response[] = array(
        'name' => $post['naam'],
        'lat' => $post['latitude'],
        'lng' => $post['longtitude'],
    );
}

echo json_encode($response);
?>

Hope this helps other people in future!