Use php to populate javascript array

Question

All, I have the following bit of code:

function addPoints() {

newpoints[0] = new Array(41.45998, 87.59643, icon0, 'Place', 'Content to open'); 

    for(var i = 0; i < newpoints.length; i++) {
       var point = new GPoint(newpoints[i][1],newpoints[i][0]);
       var popuphtml = newpoints[i][4] ;
       var marker = createMarker(point,newpoints[i][2],popuphtml);
       map.addOverlay(marker);
   }
}

There is other code around this to display the marker on my map. However this value is hardcoded. I have a PHP/mySQL database that has lat/long coordinates along with some other values. Say I have like three entries that I want to create markers for. How would I pass the addPoints function the lat/long that I got from my database so I can use it in this function correctly?

I updated my code to look like the following for the addPoints:

function addPoints(num, lat, long) {
newpoints[num] = new Array(lat, long, icon0, 'Place', 'Stuff name'); 
alert("The newpoints length is: "+newpoints.length);
for(var i = 1; i < newpoints.length; i++) {
    var point = new GPoint(newpoints[i][1],newpoints[i][0]);
    var popuphtml = newpoints[i][4] ;
    var marker = createMarker(point,newpoints[i][2],popuphtml);
    map.addOverlay(marker);
}
}

I call this function by doing this:

<script> 
    addPoints('<?php echo json_encode($num_coordinates); ?>','<?php echo json_encode($lat_coordinates); ?>', '<?php echo json_encode($long_coordinates); ?>');
</script>

It doesn't work though. When I try not to pass it to javascript and just output the lat coordinates for example. I get the following output:

{"1":"40.59479899","2":"41.4599860"}

Which are the correct coordinates in my array. No markers get created though. Any ideas on what to do next or what I'm doing wrong?

Answer 1

PHP executes on the server before getting sent to the the client. Therefor, if you can do things like this:

newpoints[0] = new Array(<?php echo $lattitude;?>, <?php echo $longitude;?>, icon0, 'Place', 'Content to open');

Where $lattitude and $longitude are values that you pulled out of you database with PHP.

When this page is requested by the client, your php code executes, real values get plugged in where those php tags are making it look like the example you provided, and then it gets sent to the client.

If you want to change these values using JS on the client, or fetch new ones from the server, let me know and I'll add an example of that.

EDIT:

Okay, in light of your comments, it sounds like you've got a few options. Here's one:

When the user selects a category (restaurants, bars, etc) you pass that category as a url parameter and reload either the whole page, or just the map part of it (depends on your set up but might be worth investigating). Your link would look something like this:

http://www.your-domain-here.com/maps.php?category=bars

Maps.php is ready to catch the category using the $_GET array:

$category = $_GET['category']; //'bars'

Your php then grabs the appropriate location data from the database (I'll leave that part to you) and sticks it in a variable that your JS-controlled map will be able to use:

//JS in maps.php  -  you could add this var to the window object
// if you have separated js files...
var locationCoords = <?php echo json_encode($arrayOfCoordinatesFromDB);?>;

When you page loads on the client machine, it now has an array of coordinates to use for the map ready to go in the locationCoords variable.

Then, depending on which coordinates you need to display on the map, you pass them as arguments to your addPoints() using standard Javascript (nothing tricky here).

That's how I'd do it. Hope that helps!

Answer 2

An easy and clean way to pass an array from PHP to JavaScript is to simply echo the json_encode version of the array.

$array = array(1,2,3,4,5,6);
echo 'var values = '.json_encode($array).';';

Answer 3

It is as simple as echoing the php values.
new Array(<?php echo $php_lat;?>, <?php echo $php_long;?>, icon0 etc...