Google Maps - Getting points in Php array, to points on a map

Question

So i have a page called region.php, which in the header, loads JQuery, the google maps API, and the custom Jquery functions I use for my app in a file called functions.js.

In region.php, I pull a few rows from the MySQL DB and store them in a php array, $regions.

In my functions.js file, I'm trying to json_encode the $regions array, and pass it to my function, to plays all of the lats and longitudes of the $regions array on the google map. However, IM having trouble getting the Php array into Javascript.

I had been following this but it doesnt seem to be working for me: Iterating through a PHP array in jQuery?. Doesn't seem like the javascript can work with the php in the example they give

any ideas? (and I suppose if im going about this all wrong -- what is the best way to get the php array into javascript?

Region.php $regions = get_regions();

foreach($regions as $region) : 

    print $region['name']; 

endforeach;


print "<div id='map_view_canvas' style=\"width:300px; height:300px; \"></div>";

functions.js

$(document).ready(function() { 

    initialize_view_map(); 
}

function initialize_view_map() 
{   
    var latlng = new google.maps.LatLng(9.3939, 20.57268);
    var myOptions = {
        zoom: 2,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_view_canvas"), myOptions);

    var mapPoints = <?php echo json_encode($regions) ?>;

    $.each(mapPoints, function (i, elem) {

        var newLatLng = new google.maps.LatLng(elem.latitude, elem.longitude);

        var marker = new google.maps.Marker({
            position: newLatLng, 
            map: map, 
            draggable:false,
            animation: google.maps.Animation.DROP
        });

    });
}

Answer 1

From the example you link to:

var arrayFromPHP = <?php echo json_encode($viewFields) ?>;

that needs to go in a php file not your functions.js file, which is what it sounds like you've done. The code between is php, so needs to run on the server side, it can't run in javascript (which is client side and so knows nothing about php or any server side code\variables\etc)

EDIT:

Now that you've added your code, try something like the following. Sorry, I'm not too familar with php, but hopefully you get the idea:

Regions.php

$regions = get_regions();

foreach($regions as $region) : 

    print $region['name']; 

endforeach;

print "<script>";
print "var mapPoints = ";
echo json_encode($regions->toArray());
print "</script>";
print "<div id='map_view_canvas' style=\"width:300px; height:300px; \"></div>";

Then your Javascript becomes (note the mapsPoint variable has been output by the regions.php already so I remove it here)

$(document).ready(function() { 

    initialize_view_map(); 
}

function initialize_view_map() 
{   
    var latlng = new google.maps.LatLng(9.3939, 20.57268);
    var myOptions = {
        zoom: 2,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_view_canvas"), myOptions);

    $.each(mapPoints, function (i, elem) {

        var newLatLng = new google.maps.LatLng(elem.latitude, elem.longitude);

        var marker = new google.maps.Marker({
            position: newLatLng, 
            map: map, 
            draggable:false,
            animation: google.maps.Animation.DROP
        });

    });
}

EDIT2:

Another thing to try is rename your functions.js to function.js.php, update any references to it and then try that - then it would hopefully run through the php pipeline and run the php code in your js file.