Get variable from one javascript to another javascript in another php file

Question

I have 2 php files with javascript inside ( driverlocator.php and automap.php ). the driverlocator.php is to display a map and the automap.php is to get the data from the database and to put markers on the map.

Now, my problem is how can I get the variable of the map so that I can use it to place my markers?

driverlocator.php

<?php
    session_start();

    if (!isset($_SESSION['user_id']))
        {
        header("Location: index.php");
        }

    $_SESSION['navMenu'] = "driverlocator";
    ini_set('display_errors', 'On');
    require_once 'includes/database.php';

    include_once 'system_menu.php';

    include_once 'automap.php';
?>
    <html>
    <head> 
    <title>Driver Locator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-
    scalable=no"> 
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"> 
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css"> 
    body { background:url(images/bgformal1.png)fixed no-repeat center; background-size:cover; } .asd { color: white; font-family: "Times New Roman", Georgia, Serif; } .title{ font-family: "Times New Roman", Georgia, Serif; font-weight: bold; text-shadow: 2px 2px black; color: white; } .MapLegend { width: 100%; border-style: solid; border-color: black; border-width: 1%; background-color: grey; padding: 0 2% 5% 2%; } .LegendText { font-family: "Times New Roman", Georgia, Serif; font-weight: bold; text-align: center; text-shadow: 1px 1px white; } #containerTitleAndMap { float: right; width: 80%; padding: 0 1% 0 .5%; } .containerLegend { float: left; width: 20%; padding: 5% .5% 0 1%; }
</style>
</head>

<body>
    <div class="containerLegend">
        <div class="MapLegend">
            <h3 class="LegendText"> LEGEND: </h3>
            <?php
                $query = mysqli_prepare(connection2() , "SELECT driver_number, driver_fname, 
                    driver_lname, order_id, driver_marker_url, customer_marker_url FROM 
                    driver_tbl ORDER BY driver_number");
                mysqli_stmt_execute($query);
                mysqli_stmt_store_result($query);
                mysqli_stmt_bind_result($query, $driver_number, $driver_fname, $driver_lname, $order_id, $driver_marker_url, $customer_marker_url);

                while (mysqli_stmt_fetch($query))
                    { ?>
                                <h4 class="asd">
                    <img src='<?php
                    echo $driver_marker_url ?>'>
                    <?php
                    echo $driver_fname . " " . $driver_lname . "<br />"; ?>
                    <img src='<?php
                    echo $customer_marker_url ?>'>
                    <?php
                    echo "Customer " . $driver_number . "<br /><br />"; ?> 
                    </h4>
                                <?php
                    } 
            ?>
        </div>
    </div>

    <div id="containerTitleAndMap">
        <div>
            <h1 class="title">Driver Locator</h1>
        </div>
        <div id="show" style="width:100%;height:80%; border-style: double; border-
    width:10px; border-color: black; background-color: grey;">

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

            var cafemariajerica = new google.maps.LatLng(14.614388, 121.061072);
            var mapCanvas = document.getElementById("show");
            var mapOptions = {
                center: cafemariajerica,
                zoom: 15
            };
            var map = new google.maps.Map(mapCanvas, mapOptions);

            setInterval(function() {

                $('#show').load('automap.php')

            }, 3000);
        });
    </script>
</body>
</html>

automap.php

<?php
require_once 'includes/database.php';

$driverQuery = "SELECT driver_number, driver_coordinates, driver_marker_url, 
customer_marker_url FROM driver_tbl ORDER BY driver_number";
$customerQuery = "SELECT order_id, driver_number, coordinates FROM order_tbl 
WHERE order_status = 'Dispatched' ORDER BY driver_number";

$driverOutput = [];
$customerOutput = [];

if(!$driverResult = connection2()->query($driverQuery)){
 die('There was an error running the query [' . connection2()->error . ']');
} else {
while($row = $driverResult->fetch_assoc()){
    $driverOutput[]=$row;
}
}

if(!$customerResult= connection2()->query($customerQuery)){
 die('There was an error running the query [' . connection2()->error . ']');
} else {
while($row = $customerResult->fetch_assoc()){
    $customerOutput[]=$row;
}
}
?>
<script>
function myMap() {

<?php
$count = sizeof($driverOutput);
for($i=0; $i<$count; $i++){
?>
var driverLocation = new google.maps.LatLng(<?php echo $driverOutput[$i]
['driver_coordinates']; ?>);
var customerLocation = new google.maps.LatLng(<?php echo $customerOutput[$i]
['coordinates']; ?>);

//============================DRIVER 1==============================
pinImage = new google.maps.MarkerImage(<?php echo "'".$driverOutput[$i]
['driver_marker_url']."'"; ?>);

var marker_driver1 = new google.maps.Marker({
        position: driverLocation,
        icon: pinImage,
        map: map
});
//============================CUSTOMER 1==============================
pinImage2 = new google.maps.MarkerImage(<?php echo "'".$driverOutput[$i]
['customer_marker_url']."'"; ?>);

marker_customer1 = new google.maps.Marker({
        position: customerLocation,
        icon: pinImage2,
        map: map
});

<?php
}
?>
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=KEYHERE&callback=myMap"></script>

I want to get the var map from driverlocator.php and use it in map : map in automap.php. What should I do? Please help.

Answer 1

Currently your map variable is local to the jquery document ready function ( $(document).ready(function() { ), make it global and initialize it in the document ready function.

var map;
$(document).ready(function() {

var cafemariajerica = new google.maps.LatLng(14.614388, 121.061072);
var mapCanvas = document.getElementById("show");
var mapOptions = {center: cafemariajerica, zoom: 15};
map = new google.maps.Map(mapCanvas, mapOptions);

    setInterval(function () {

    $('#show').load('automap.php')  

    }, 3000);
});

Get variable from one javascript to another javascript in another php file

Question

1 answers

solution1
0 2017-09-27 11:16:23

Get variable from one javascript to another javascript in another php file

Question

1 answers

solution1 0 2017-09-27 11:16:23

solution1
0 2017-09-27 11:16:23