web-dev-qa-db-fra.com

En mettant PHP des variables en javascript

J'ai créé une page d'options de thème simple pour mon site. La page d'options contient trois champs de saisie. Je peux sortir les champs en utilisant get_option.

Les trois champs sont appelés comme suit:

<?php echo get_option( 'map_zoom' ); ?>
<?php echo get_option( 'map_longitude' ); ?>
<?php echo get_option( 'map_latitude' ); ?>

Ces variables permettent de contrôler le niveau de zoom, la longitude et la latitude d'une carte. J'ai un fichier javascript qui rend la carte en utilisant l'API Google Maps. J'aimerais mettre ces variables dans ce fichier javascript. Lorsque je mets le javascript dans un fichier php et que j'ajoute ces variables, la carte est rendue, mais je perds tout le reste de mes fonctions de carte, qui sont considérables. De plus, je dois ensuite appeler le script php dans l'en-tête au lieu d'utiliser wp_enqueue_script dans le fichier de fonctions.

Voici la carte javascript:

var infowindow = new google.maps.InfoWindow();
var shadow = new google.maps.MarkerImage('/wp-content/themes/re-aligned/images/shadow.png', new google.maps.Size(37, 34) );


var markers = [];
var categories = [
    {
        name: 'People',
        slug: 'people',
        url: 'marker-people.png'
    }, {
        name: 'Works',
        slug: 'works',
        url: 'marker-works.png'
    }, {
        name: 'Discourse',
        slug: 'discourse',
        url: 'marker-discourse.png'
    }, {
        name: 'Other',
        slug: 'other',
        url: 'marker.png'
    }
];

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

function initialize() {

    jQuery('body').append(jQuery('<div id="toolbar"><h2>Map Categories</h2></div>'));

    // add checkboxes to toolbar
    for (var i = 0; i < categories.length; i++) {
        jQuery('#toolbar').append(
            jQuery('<input />', {
                type: 'checkbox',
                id: 'tog-marker-'+categories[i].slug,
                name: 'tog-marker-'+categories[i].slug,
                class: 'squaredTwo',
                value: i,
                checked: true
            })
        );
        jQuery('#toolbar').append(
            categories[i].name
        );
    }

    jQuery('#toolbar > input[type=checkbox]').click(function() {
        for(var i = 0; i < markers.length; i++) {

            if(markers[i].icon.url.endsWith(categories[jQuery(this).val()].url)) {
                if(jQuery(this).is(':checked')) markers[i].setVisible(true);
                else markers[i].setVisible(false);

            }
        }
    });

    // Create an array of styles.
    var styles = [

        {
            "featureType": "landscape.natural",
            "stylers": [
                { "color": "#ff412d" },
                { "visibility": "on" }
            ]
        },{
            "featureType": "administrative.land_parcel",
            "stylers": [
                { "visibility": "off" }
            ]
        },{
            "featureType": "administrative.neighborhood",
            "stylers": [
                { "visibility": "off" }
            ]
        },{
            "featureType": "administrative.province",
            "stylers": [
                { "visibility": "simplified" }
            ]
        },{
            "featureType": "administrative.country",
            "stylers": [
                { "visibility": "on" }
            ]
        },{
            "featureType": "water",
            "stylers": [
                { "color": "#ffebc5" }
            ]
        },{
            "featureType": "road",
            "stylers": [
                { "visibility": "simplified" },
                { "color": "#ffebc5" }
            ]
        },{
            "featureType": "poi",
            "stylers": [
                { "visibility": "off" }
            ]
        },{
            "featureType": "road.highway",
            "stylers": [
                { "visibility": "off" }
            ]
        },{
            "featureType": "administrative.locality",
            "stylers": [
                { "visibility": "off" }
            ]
        },{
            "featureType": "administrative.country",
            "elementType": "geometry",
            "stylers": [
                { "visibility": "off" }
            ]
        }
    ];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    var styledMap = new google.maps.StyledMapType(styles,
        {name: "Styled Map"});

    // Create a map object, and include the MapTypeId to add
    // to the map type control.
    var mapOptions = {
        zoom: <?php echo get_option( 'map_zoom' ); ?>,
        scrollwheel: true,
        center: new google.maps.LatLng(<?php echo get_option( 'map_latitude' ); ?>, <?php echo get_option( 'map_longitude' ); ?>),
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
        mapTypeControl: true,
        mapTypeControlOptions:  {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        scaleControl: false,
        scaleControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP
        }
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var oms = new OverlappingMarkerSpiderfier(map);

    //Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    oms.addListener('click', function(marker, event) {
        infowindow.setContent(marker.desc);
        infowindow.open(map, marker);
    });


    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
            desc: locations[i].info,
            icon: locations[i].marker,
            shadow: shadow,
            map: map
        });
        oms.addMarker(marker);
        markers.Push(marker);
    }

}

Comment puis-je correctement sortir les variables dans le fichier javascript?

UPDATE:

Après avoir pris en compte les informations sur wp_localize_script, j'ai effectué les opérations suivantes:

J'ai mis cela dans mon functions.php

wp_enqueue_script( 'map-script' );
    $object = array(
        'zoom' => get_option('map_zoom'),
        'longitude' => get_option('map_longitude'),
        'latitude' => get_option('map_latitude'),
    );  
wp_localize_script('map-script', 'JSObject', $object);
    }

et utilisé JSObject.variable dans ma carte javascript comme suit:

var mapOptions = {
        zoom: JSObject.zoom,
        scrollwheel: true,
        center: new google.maps.LatLng(JSObject.latitude, JSObject.longitude),
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
        mapTypeControl: true,
        mapTypeControlOptions:  {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        }

Mais cela renvoie l'erreur: Uncaught Error: Invalid value for property <zoom>: 9

9 est la variable de zoom réelle de sorte qu'il semble fonctionner en quelque sorte ...

phpjavascripttheme-optionsvariablesgoogle-maps
1
Ciaran Gaffey

Utilisez wp_localize_script :

wp_enqueue_script('YOUR_SCRIPT_HANDLE');
$object = array(
    'zoom' => get_option('map_zoom'),
    'longitude' => get_option('map_longitude'),
    'latitude' => get_option('map_latitude'),
);
wp_localize_script('YOUR_SCRIPT_HANDLE', 'JSObject', $object);

Et ensuite, utilisez-le dans votre fichier JS comme JSObject.zoom, etc.

1
tfrommen

Je vous suggère d'utiliser wp_localize_script: http://codex.wordpress.org/Function_Reference/wp_localize_script pour inclure des données Js arbitraires dans votre page

1
Godwinh