Question

Why can’t I put the function below inside jQuery(document).ready(function() { } ?

 function csf_map_maker_js( args ) {

      // Default js args.  Args passed to function will override these.
      var default_args = {
        width : 610,
        height : 400,
        latitude :  37.93,
        longitude :  -75.09,
        zoom : 8,
        mtype: 'ROADMAP',
        encoded_points: ' blah blah',
        id: 'csf_map_canvas',
        hood: 'My Neighborhood'
      }; 


      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 encodedPoints = args['encoded_points'];
     var decodedPoints = google.maps.geometry.encoding.decodePath(encodedPoints);

     var myOptions = {
        zoom: parseInt( args['zoom'] ),
        center: latlng,
        mapTypeId: google.maps.MapTypeId[args['mtype']],
        streetViewControl: true,
        zoomControl: true,
        panControl: true
      };


    csf_map = new google.maps.Map(document.getElementById( args['csf_id'] ), myOptions);

     var encodedPolygon = new google.maps.Polyline ({
        strokeColor: "#0000FF",
        strokeOpacity: 0.55,
        strokeWeight: 5,
        path: decodedPoints,
        fillOpacity: 0,
        clickable: false,
        map: csf_map
     });
}

If I put it outside, the (document).ready block it works, (although I think that some other functions are getting called before the map loads). The code is for a WordPress plugin.

The function gets called in the php script as follows:

$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;

Do I need to change the way the function is called in the php script when it’s inside jQuery(document).ready(function() { } ?

Answer 1

if you put your function in jQuery(document).ready(function() { }); and your call of the function from your php is not in jQuery(document).ready(function() { }); your function is called before the function is created, so it does not exist in that moment

so but both in jQuery(document).ready(function() { }); and make sure your function is declared before its called.