Colocando variables ​​PHP em javascript

Criei uma página de opções de tema simples para o meu site. A página de opções contém três campos de input. Posso enviar os campos usando o get_option.

Os três campos são chamados usando o seguinte:

   

Essas variables ​​são para controlar o nível de zoom, a longitude e a latitude de um mapa. Eu tenho um arquivo javascript que processa o mapa usando o google maps api. Gostaria de colocar essas variables ​​nesse arquivo de javascript. Quando coloco o javascript em um arquivo php e adicione essas variables, o mapa renderiza, mas perco todas as demais funções do mapa que são consideráveis. Também eu tenho que chamar o script php no header em vez de usar wp_enqueue_script no arquivo de funções.

Aqui está o mapa 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('

Map Categories

')); // add checkboxes to toolbar for (var i = 0; i < categories.length; i++) { jQuery('#toolbar').append( jQuery('', { 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: , scrollwheel: true, center: new google.maps.LatLng(, ), 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); } }

Como posso enviar as variables ​​corretamente para o arquivo javascript?

ATUALIZAR:

Depois de levar a bordo as informações sobre wp_localize_script, fiz o seguinte:

Coloquei isso nas minhas funções.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); } 

e usei jSObject.variable no meu mapa javascript assim:

 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 } 

Mas isso retorna o erro: Uncaught Error: Invalid value for property : 9

9 é a variável de zoom real, portanto, parece estar funcionando de forma …

Solutions Collecting From Web of "Colocando variables ​​PHP em javascript"

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

E depois use-o em seu arquivo JS como JSObject.zoom e similares.

Sugiro que você use wp_localize_script: http://codex.wordpress.org/Function_Reference/wp_localize_script para include dados js arbitrários em sua página