Javascript Function Called Too Early in PHP Script

Question

I'm working on a Google Maps plugin.

My problem is that the function that initializes the map, csf_map_maker_js(), is getting called too early-- before the div is defined (at least that's what I think is the problem).

In the PHP, I've got:

$csf_map_output .= '<div id="csf_map_canvas" style="width:'. $atts['width'].'px; height: '. $atts['height'] .'px;"></div>'; 

$csf_map_output .= '<script>var csf_map_params = ' .  json_encode( $atts ) .  '; csf_map_maker_js( csf_map_params );</script>';  

return $csf_map_output;

I don't think that the csf_map_canvas div is ready when the function is called.

In the javascript script, the csf_map_maker_js() function is defined outside of jQuery(document).ready(function() {}); . If I move it inside, will the csf_map_canvas div be ready when the function is called.? If so, how do I change the function call in the PHP script in order to call a function in an anonymous function? How do I get around the scope issue?

Is there another way?

Answer 1

if u think that is the problem simply do:

$csf_map_output .= '<script>
jQuery(document).ready(function(){
    var csf_map_params = ' .  json_encode( $atts ) .  ';
    csf_map_maker_js( csf_map_params );
});
</script>';

I don't see any scope issues with the above code.