title: How can I pass a parameter to a function without it running right away?
body: <p>I'm having somewhat of an odd issue with trying to piece together a somewhat dynamic Google Maps display. I have overlays on a map that I would like to call a function when clicked. Initially I had everything hard coded, so I had a function for each overlay like this:</p>
  
  <pre><code>google.maps.event.addListener(southEast, 'click', showSouth);
  function showSouth() {
     // do stuff
  }
  </code></pre>
  
  <p>This worked without a problem, but then I made the whole page more dynamic so I decided to make one function that would pass an ID and then display based on that, which is how I feel it should have been set up originally anyway. I altered the code to look more like this:</p>
  
  <pre><code>google.maps.event.addListener(southEast, 'click', showArea(1));
  function showArea(id) {
     // do stuff based on that id
  }
  </code></pre>
  
  <p>The function worked, but the problem is it gets called immediately on page load. After researching I've learned that when you call a function with the parentheses, that function gets called immediately and then it's return value is referenced. <a href="https://stackoverflow.com/questions/3246928/in-javascript-does-it-make-a-difference-if-i-call-a-function-with-parentheses">source</a></p>
  
  <p>So now I'm a little stuck as to how exactly to go about passing that ID to the function without having it call the function immediately. I've found some hacky ways of doing it that might work, but I feel like this shouldn't be something I have to hack together...</p>