title: Why can't I put my function inside jQuery(document).ready(function() { }
body: <p>Why can't I put the function below inside <code>jQuery(document).ready(function() {  }</code> ?</p>
  
  <pre><code> 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
       });
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>The function gets called in the php script as follows:</p>
  
  <pre><code>$csf_map_output .= '&lt;div id="csf_map_canvas" style="width:'. $atts['width'].'px; height: '. $atts['height'] .'px;"&gt;&lt;/div&gt;'; 
  
  $csf_map_output .= '&lt;script&gt;var csf_map_params = ' .  json_encode( $atts ) .  '; csf_map_maker_js( csf_map_params );&lt;/script&gt;';  
  
  return $csf_map_output;
  </code></pre>
  
  <p>Do I need to change the way the function is called in the php script when it's inside <code>jQuery(document).ready(function() {  }</code> ? </p>