web-dev-qa-db-ja.com

パッティング PHP JavaScriptへの変数

私は自分のサイト用の簡単なテーマオプションページを作成しました。オプションページには3つの入力フィールドがあります。 get_optionを使ってフィールドを出力できます。

3つのフィールドは以下を使って呼び出されます。

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

これらの変数は、ズームレベル、地図の経度と緯度を制御するためのものです。私はグーグルマップAPIを使用して地図をレンダリングするJavaScriptファイルを持っています。これらの変数をそのJavaScriptファイルに入れたいのですが。 JavaScriptをphpファイルに入れてこれらの変数を追加すると、マップはレンダリングされますが、残りのすべてのマップ機能は失われます。また、関数ファイルでwp_enqueue_scriptを使用するのではなく、ヘッダーでスクリプトphpを呼び出す必要があります。

これが地図の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);
    }

}

どのように私は正しくJavaScriptファイルに変数を出力することができますか？

更新：

Wp_localize_scriptに関する情報を入手した後、次のことを行いました。

これを自分の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);
    }

私の地図のjavascriptではJSObject.variableを次のように使っています。

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
        }

しかし、それはエラーを返します：Uncaught Error: Invalid value for property <zoom>: 9

9は実際のズーム変数です。

phpjavascripttheme-optionsvariablesgoogle-maps
1
Ciaran Gaffey

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);

それからJSObject.zoomなどのようにあなたのJSファイルでそれを使用してください。

1
tfrommen

Wp_localize_scriptを使用することをお勧めします。 http://codex.wordpress.org/Function_Reference/wp_localize_script を使用して、ページに任意のjsデータを含めることができます。

1
Godwinh