How to pass variable of wp shortcode to JavaScript?

Question

I have created a shortcode of google map in my theme. Here's all the code:

function shortcode_googlemap_view($atts){
    extract(shortcode_atts(array(
        "width"=>'',
        "height"=>'',
        "latitude"=>'',
        "longitudinal"=>'',
    ),$atts));
    return '<div id="map_view"  style="width:'.$width.'px;height:'.$height.'px;"></div>';
}
add_shortcode("google_map","shortcode_googlemap_view");

JavaScript:

function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(24.17310, 88.91905),
    zoom:12,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_view"),mapProp);
};
google.maps.event.addDomListener(window, 'load', initialize);

</script>

Now I want to pass the value of "latitude" for 24.17310 and "longitudinal" for 88.91905 in JavaScript

center: new google.maps.LatLng(24.17310, 88.91905),

Omri · Accepted Answer · 2016-01-04 11:53:11Z

1

You have several options:

Generate the Javascript code dynamically, using PHP, inside the shortcode function/class. Then you can use the shortcode attributes in PHP to generate the needed Javascript code.
Refactor the initialize function a bit, so that it accepts lat, long as input args, and use them to properly init the map.

answered Jan 4, 2016 at 11:53

Omri

7231 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patrick Münster · Accepted Answer · 2018-05-11 22:07:31Z

0

Thanks for the answer. I'm returning now a in my plugin function and it works:

function loadMyPlugin($atts) {

    extract(shortcode_atts(array(

        "myValue" => 'false'

    ), $atts));

    include dirname( __FILE__ ) . './myPlugin-ui.php';

    return '<script>var myValue = "'.$atts['myValue'].'"</script>';
}

But this looks not like a clean solution. I would like to use the wp_localize_script() function but I was able to do that. An example for the second solution would be great.

answered May 11, 2018 at 22:07

Patrick Münster

5292 gold badges5 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to pass variable of wp shortcode to JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related