How Can I Access a PHP Variable in Another PHP Function

Question

G’day mate 😉

I’ve done this by outputting the variables within a script tag right within the body. I played around with your code and came up with this solution:

function lax_google_map_init() {

  // Don't bother loading the scripts if we're in the admin area
  if ( is_admin() ) {
    return;
  }

  wp_enqueue_script( 'google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false' );
  wp_enqueue_script( 'lax_google_map_script', plugins_url( 'js/lax_google_map_script.js', __FILE__ ), array ( 'google-maps','jquery' ) );
}
add_action( 'wp_print_scripts', 'lax_google_map_init' );


function lax_google_map_maker( $atts, $content = null ) {
    // Default params.
    $atts = shortcode_atts( array ( 
      'latitude'=>'-25.068302',
      'longitude'=>'-130.095581',
      'zoom' => 18,
      'id' => 'map_canvas',
      'width' => '500px',
      'height' => '500px'
      ), $atts );

    $output .= '<div id="' . esc_attr( $atts['id'] ) . '" style="width:' . esc_attr( $atts['width'] ) . '; height: '. esc_attr( $atts['height'] ) .'; border:1px solid black;"></div>';
    $output .= 
    "<script>" . "\n" . 
      "var lax_map_params_" . $atts['id'] . " = " . json_encode( $atts ) . "; lax_google_map_maker_js( lax_map_params_" . $atts['id'] . " );" . "\n" . 
    "</script>" . "\n";  

    return $output;
}
add_shortcode( 'lax-google-map', 'lax_google_map_maker' );
// [lax-google-map latitude="-66.552635" longitude="84.137421" zoom='12'] // no id, usees default
// [lax-google-map latitude="65.032366" longitude="-376.747681" zoom='12' id="map_1"] // id specified.  Will be used in js variable name, so no hyphens or other chars that will break js variable names allowed.
// [lax-google-map latitude="-25.068302" longitude="-130.095581" zoom='12' id="map_2" width="200px" height="200px"] // custom dimensions
// [lax-google-map latitude="-34.397" longitude="150.644" zoom='12' id="map_3"]

Here is the lax_google_map_script.js file:

jQuery(document).ready(function($) { 
  // alert ('hi');
});

function lax_google_map_maker_js( args ) {

  // Default js args.  Args passed to function will override these.
  var default_args = {
    latitude :  -34.397,
    longitude :  150.644,
    id : 'map_canvas',
    zoom : 8
  }; // @link http://www.openjs.com/articles/optional_function_arguments.php

  for ( var index in default_args ) {
    if ( typeof args[index] == "undefined" ) {
      args[index] = default_args[index];
    }
  }

  var latlng = new google.maps.LatLng(args['latitude'], args['longitude']);

  var myOptions = {
    zoom: parseInt( args['zoom'] ),
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    // alert ('hi'); // just showing that you can use jQuery with the dollar method in here.

  var map = new google.maps.Map(document.getElementById( args['id'] ), myOptions);  
}

Notes: localize_script can only do js arrays 1 level deep, so personally I didn’t go that route (source – see comments).

I learned the inline js variable trick from a great WPSE answer by Bainternet.

I do think the best way to do this is by putting everything in a class, and outputting the concatenated js from a property wrapped in properly formatted js tags fired on the wp_footer action triggered by a method that checks to see if the shortcode was used. That’s something to consider for future revisions. Optimal Script Loading

In my original answer, I removed the jQuery bits because jQuery wasn’t used in the script.
jQuery.noConflict(); isn’t needed when using WP’s included version of jQuery.
In my revised answer, I left the jQuery stuff at the top, but moved the lax_google_map_maker_js() function out of that block, because otherwise, an error occurs.

Related Posts:

Leave a Comment Cancel reply