在jQuery函数中检索wordpress自定义字段（组）数据

Question

Inside my themes’ included main.js I have to retrieve some data entered via wordpress into a range of custom fields (within field groups). How can I pass the php values into the jQuery code? To be more specific I am creating multiple google map markers within my initializeMap() function as follows:

var markers = [
                ['First Center','First Address',50,50],
                ['Second Center','Second Address', -25.363882,131.044922],
                ['Third Center','Third Address', 10.363882,95],
                ['Fourth Center','Fourth Address', -50,-90],
                ['Fifth Center','Fifth Address', 30,5],
            ];

            for( var i = 0; i < markers.length; i++ ) {

                var latlng = new google.maps.LatLng(markers[i][2], markers[i][3]);                  
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: markers[i][0],
                    icon: image
                });
            }

With the help of the ACF wordpress plugIn it was easy to create the custom fields to edit from inside my wordpress. Each custom field group named "Center 1", "Center 2"… contains the 4 fields for "Center name", "Center address", "Latitude" and "Longitude". But now the task is to transfer this data into my markers field. Anyone with an idea? I know this is not easy. Thanks a lot, guys!

EDIT:

The guys from ACF plugin helped me out so far. Generally the code that I needed was:

<script type="text/javascript">

(function($) {

window.map_data = [];

window.map_data.push( ['<?php the_field('center_name'); ?>', '<?php the_field('center_address'); ?>', <?php the_field('latitude'); ?>, <?php the_field('longitude'); ?>]);

})(jQuery);

</script>

that I put at the very end inside my “az_google_maps.php” template given by my Wordpress theme. Then I managed to retrieve that “map_data” array inside my js file. The rest will be (as suggested by HdK) doing a loop and somehow tell the code how many fields are actually defined by the user inside the Wordpress editor. I am working on that. Have patience with my little js/php knowledge. Would be awesome not getting down voted a thousand times. But guess that’s part of the game here. So, ok ;-)

Answer 1

You can add your required javascript inside your theme template instead of your main.js and than do something like:

<script>
var markers = [
    [<?php echo get_field('center-name'); ?>, <?php echo get_field('center-address'); ?>, <?php echo get_field('lat'); ?>, <?php echo get_field('lng'); ?>]
</script>

Also take a look at this example page: http://www.advancedcustomfields.com/resources/google-map/