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

Answer 1

You have several options:

1. 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.

2. Refactor the initialize function a bit, so that it accepts lat, long as input args, and use them to properly init the map.

Answer 2

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.