Passing PHP Array into Javascript

Question

I have an Array like below in PHP

array(
    (int) 0 => array(
        'id' => '1',
        'name' => 'Mink7',
        'about' => 'Creative Design agency',
        'logo' => null,
        'lat' => '13.004870000000',
        'lng' => '77.576686084656'
    ),
    (int) 1 => array(
        'id' => '2',
        'name' => 'Bakasura',
        'about' => 'Live 2 Eat',
        'logo' => null,
        'lat' => '13.005643569006',
        'lng' => '77.577485382942'
    )
)

What have i done. I load the Function in the Header and have written the following in the body tag.

<script type="text/javascript">
$(document).ready(function(){
        var startups = <?php echo json_encode($startups); ?>;
        $.each(startups, function(key, val) {
            markMe(val.lat, val.lng, val.name, val.description, val.logo);
        });
});
</script>

I am getting the following error

markMe is not defined

markMe(val.lat, val.lng, val.name, val.description, val.logo);

Javascript File that is attached to HEAD.

// JavaScript Document
$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    });

    /*
    GMaps.geolocate({
        success: function (position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);
        },
        error: function (error) {
            alert('Geolocation failed: ' + error.message);
        },
        not_supported: function () {
            alert("Your browser does not support geolocation");
        },
        always: function () {
            //alert("Done!");
        }
    });
    */

    map.addControl({
        position: 'top_right',
        text: 'Geolocate',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
    });

    function markMe(lat, lng, name, description, logo){
        map.addMarker({
            lat: lat,
            lng: lng,
            title: name,
            icon: "http://i.imgur.com/3YJ8z.png",
            infoWindow: {
              content: description
            }
        });
    }

});

Answer 1

look for json_encode in PHP, and use JSON.parse in JavaScript (or a library like jQuery.parseJSON if you need broad browser support)

-- after update

instead of function markMe(lat, lng, name, description, logo){

do: markMe = function (lat, lng, name, description, logo){

that's because a function declared in a function is not availlable outside that function

Answer 2

Before answering id like to point out that i am making some assumptions.

1. I assume that the above array is in php
2. I assume that the below function is javascript

if that is the case you can just put array references into the javascript function and it will work.

Im guessing at your data mappings and I would suggest that a better method would be to build the whole function up by php and output it to the screen with a method call to make the code easier to read/understand

However with a guess at your mappings and to test to see if the code works before creating a method call i would run with something like this as a first stab.

<script type="text/javascript">
<?php
 foreach($array as $point)
 {
?>
 {
 map.addMarker({
  lat: <?php print $point["lat"]; ?>,
  lng: <?php print $point["lng"]; ?>,
  title: <?php print $point["name"]; ?>,
     icon: <?php if(!is_null($point["logo"]){ print $point["logo"];} ?>,
     infoWindow: {
       content: <?php print $point["about"]; ?>
     }
 });
 <?php } ?>
</script>

Thanks

Nicholas