title: "Uncaught reference error: initialize is not defined" when combining markers and driving directions
body: <p>Thanks for any help you can provide! I'm combining about 2000 markers from a JSON object with a driving directions tool. No matter what I try, I keep running into an initialize problem.</p>
  
  <p>Attempts: </p>
  
  <ol>
  <li><p>When I delete the "$(function(){" at the top and the related brackets at the bottom, my $('#mapall').change(function() doesn't work.</p></li>
  <li><p>When I delete the body tag's "onload="initialize()">", the console gives me a "ReferenceError: calcRoute is not defined. This seems to be related to my jquery buttons (code below):</p>
  
  <pre><code>$("#showmapview").click(function() {
  $("#map-form-page").hide();
  $("#map-route-page").show();
  window.location.hash = '#new-map-page';
  google.maps.event.trigger(map, 'resize');
  }); 
  </code></pre></li>
  </ol>
  
  <p>Here is my JS. My HTML body includes body onload="initialize()" </p>
  
  <pre><code>    &lt;script type='text/javascript'&gt; 
      $(function(){
          var directionsDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;            
          var arrMarkers = [];
          var arrInfoWindows = null;
  
          function clearOverlays() {
            if (arrMarkers) {
              for( var i = 0, n = arrMarkers.length; i &lt; n; ++i ) {
                arrMarkers[i].setMap(null);
              }
            }
          }
  
          function showOverlays() {
            if (arrMarkers) {
              for( var i = 0, n = arrMarkers.length; i &lt; n; ++i ) {
                arrMarkers[i].setMap(map);
              }
            }
          }
  
          $('#mapall').change(function() {
           if( $('#mapall').attr("checked")) {
                    showOverlays();
                    }
                    else  {
                    clearOverlays();
                    }
          });
  
      function initialize() {
            var rendererOptions = {
            CODE
           };
  
            directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
            CODE HERE
              }
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
          $.getJSON( "CODE HERE", {}, function( data ) {
          $.each( data, function( i, item ) {
          var loc = item.masterlocation;
  
          var marker = new google.maps.Marker({
          position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
          map: map,
          title: loc.nickname,
          });
          arrMarkers.push(marker);
  
            CODE
            });
                      });
  
            directionsDisplay.setMap(map);
          }
  
       ENDS INITIALIZE
  
          function calcRoute() {
            CODE HERE
  
            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: optimize,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var route = response.routes[0];
                var summaryPanel = document.getElementById("directions_panel");
  
                CODE HERE
              }
  
                  STATUS WARNINGS HERE
  
  
            });
          }   
      google.maps.event.addDomListener(window, 'load', initialize); 
      });             
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Based on @bnz's comments, I've reordered my code and deleted the body onload. Here is the new code, but now, if I uncheck the checkbox and then try to check it again, the markers will not reappear. There are no errors in the console, so I'm not sure where the problem is.</p>
  
  <pre><code>    &lt;script&gt;
      $(function(){
      var directionsDisplay;
      var map;            
  
          function clearOverlays() {
            if (arrMarkers) {
              for( var i = 0, n = arrMarkers.length; i &lt; n; ++i ) {
                arrMarkers[i].setMap(null);
              }
            }
          }
  
          function showOverlays() {
            if (arrMarkers) {
              for( var i = 0, n = arrMarkers.length; i &lt; n; ++i ) {
                arrMarkers[i].setMap(map);
              }
            }
          }
  
          $('#mapall').change(function() {
           if( $('#mapall').attr("checked")) {
                    showOverlays();
                    }
                    else  {
                    clearOverlays();
                    }
          });
  
          google.maps.event.addDomListener(window, 'load', initialize); 
          });
  
          var directionsService = new google.maps.DirectionsService();
          var arrMarkers = [];
          var arrInfoWindows = null;
  
      function initialize() {
            CODE
          }
  
      function calcRoute() {
            CODE
          }; 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>** EDIT 2 ** </p>
  
  <p>I've solved the problem where the checkbox would not turn on and off the markers. For some reason, the configuration of my javascript required that I use </p>
  
  <pre><code>    arrMarkers[i].setVisible(false); 
  </code></pre>
  
  <p>and </p>
  
  <pre><code>    arrMarkers[i].setVisible(true);
  </code></pre>
  
  <p>Since my original question dealt with the initialize function and @bnz's comments helped me resolve this problem, crediting the answer to @bnz. Hopefully, others who are unable to get the arrMarkers to work with setMap(null) will be able to use this method.</p>