Jquery load() and PHP variables

You're misunderstanding how things work.

• PHP runs before any browser response is issued to the client, and all code runs on the server. The variables declared in your PHP file are destroyed after all the PHP code has been run; they "vanish."
• JavaScript runs after the browser response has begun, and all code runs on the client. By "loading" the output result of the PHP file, you won't get any access to PHP's variables, only the output.

If you want to transfer certain variables from PHP to JavaScript, you could dump some output into JSON in your PHP script, like so:

<?PHP
    header("Content-Type: application/json");

    $myVariable = "hello world";

    echo json_encode(array(array("myVariable" => $myVariable)));

    /* Output looks like this:
       [
           {
               "myVariable": "hello world"
           }
       ]
    */
?>

Your JavaScript/JSON should look something like this:

$.getJSON("test.php", function(result) {
    console.log(result[0].myVariable);
});

Does that make sense?

Something like this

<script type="text/javascript">
var markers = <?php echo json_encode($row) ?>;
</script>

Now the markers JavaScript variable will be available to any scripts following the above.

You can access associative entries from the PHP $row array using

var latlng = markers.latlng;

While we're here, you should protect your query from SQL injection. Whilst I always recommend using PDO and parameter binding, a quick fix for you would be

$ref = get_magic_quotes_gpc() ? stripslashes($_GET['ref']) : $_GET['ref'];
$sql = sprintf("SELECT * FROM `markers` WHERE `ref` = '%s'",
               mysql_real_escape_string($ref));

Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:

"A callback function that is executed if the request succeeds."

Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load() — the functions aren't built the way I was thinking.

If I want to trigger an event once the new content finally loads, I'll need to take a different approach.

• I could use the JS onload event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload property). EDIT: Note that using HTML iframe elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes.
• Also, I could use jQuery to check the .ready() state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready() status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.

Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load() was all I needed. Cheers!