title: Reducing global variables and maintaining function flow
body: <p>Javascript is not my first language of choice, nor is it one I am all that well versed in.
  Functional stuff fine, objects, not so much.</p>
  
  <p>I am looking to see if anyone can suggest options for dealing with the following scenario.</p>
  
  <pre><code>function postcodeEntry(destination,postcode) {
      "use strict";
      document.getElementById('googlemappostcode').innerHTML = &lt;?php if ($_GET['page']==="fun") echo "&lt;div id=\"map\"&gt;&lt;/div&gt;' + ";?&gt;'&lt;form id="postcodeEntry" method="post" action="/" onsubmit="calcRoute(\'driving\',this.postcode.value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;"&gt;'
          + '&lt;h2&gt;Get directions&lt;/h2&gt;'
          + '&lt;fieldset&gt;'
          + '&lt;input type="hidden" name="action" value="gmap-directions" /&gt;'
          + '&lt;p class="where"&gt;&lt;a href="/contact/" onclick="geoLoc();return false;"&gt;Where am I?&lt;/a&gt;&lt;/p&gt;'
          + '&lt;label for="postcode"&gt;Enter your postcode for directions&lt;/label&gt;'
          + '&lt;input type="text" name="postcode" id="postcode" onfocus="checkthis(this,\'Your Postcode/Address:\')" onblur="checkthis(this,\'Your Postcode/Address:\')" value="Your Postcode/Address:" /&gt;'
          + '&lt;input type="submit" name="submitTravelType" value="Driving" id="gms_driving" onclick="calcRoute(\'driving\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" /&gt;'
          + '&lt;input type="submit" name="submitTravelType" value="Walking" id="gms_walking" onclick="calcRoute(\'walking\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" /&gt;'
          + '&lt;input type="submit" name="submitTravelType" value="Public Transport" id="gms_transit" onclick="calcRoute(\'transit\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" /&gt;'
          + '&lt;input type="submit" name="submitTravelType" value="Cycling" id="gms_bicycling" onclick="calcRoute(\'bicycling\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" /&gt;'
          + '&lt;/fieldset&gt;'
          + '&lt;/form&gt;'
          + '&lt;div id="directions"&gt;&lt;/div&gt;';
  }
  
  function initialize() {
      "use strict";
      var contentString, destination, el, entryPanoId, i, image, infowindow, links, mapOptions, panoId, panoOptions, radius, shadow, shape;
      /* Destination becomes a four part array. 1st being lat, 2nd being long, 3rd being a google maps latlng and the 4th being postcode */
      destination = [&lt;?php echo $venue['latlong']?&gt;];
      destination[2] = new google.maps.LatLng(destination[0], destination[1]);
      destination[3] = '&lt;?php echo $venue['postcode']?&gt;';
      postcodeEntry(destination[2], destination[3]);
      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer();
      trafficLayer = new google.maps.TrafficLayer();
      streetviewService = new google.maps.StreetViewService();
      ...
  </code></pre>
  
  <p>When the initialising function is called it does it's bit and makes the map fine. The postcode/location entry works perfectly. In fact it all works, no problems with that.</p>
  
  <p>My question is being as some info is shot off to the postcode form, the return from that form goes to either the geoLoc or calcRoute functions. This of course means I lose contact with anything set up in the initialization function.</p>
  
  <p>This means I have to use quite a number of global variables including but not limited to every one of those items in the shown script segment.</p>
  
  <p>I am trying to learn more about the language and become more proficient in it's use. As a result, I would like (mostly out of pure stubbornness) to try and reduce the globals to none (if that's possible) or as few as possible.</p>
  
  <p>Is there some way to solve this? I do not know much about javascript objects but I am learning all the time so somehow turn the initialize function into an object that then contains all the other objects? (Considering how little I know about javascript objects currently, that might actually be completely mad)</p>