title: jQuery/Javascript: Google Maps: How to toggle multiple pins on a map?
body: <p>I have a database of locations which I want to be able to print on a map.  Ideally there should be one map with multiple pins for each location you have toggled on.  So click a button for location X and it shows up on the map.  Click the button for location Y and it shows up <em>on the same map</em>.  Click X again and it <em>hides</em> from the map.</p>
  
  <p>Currently I have it so I click on X and the map gets redrawn centered around point X.</p>
  
  <p>Here is the HTML for each button:</p>
  
  <pre><code>&lt;input type='button' data-lat='38.89864400' data-long='-77.05283400'
                data-when='20 Aug at 2:00am' value='Location X' class='click' /&gt;
  </code></pre>
  
  <p>The jQuery I'm using is:</p>
  
  <pre><code>jQuery(document).ready(
  
      function initialize() {
  
          jQuery("input.click").click(function() {
              showOnMap(jQuery(this).data('lat'), jQuery(this).data('long'), jQuery(this).data('when'));
          });
      }
  );
  
  function showOnMap(lat, long, message) {
  
      var myLatlng = new google.maps.LatLng(lat, long);
      var mapOptions = {
          zoom: 13,
          center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: message
      });
  
      google.maps.event.addDomListener(window, 'load', showOnMap);
  }
  </code></pre>
  
  <p>Is there an easy way to switch from what I have to what I want?  I've searched for a while but no one seems to be asking this use case in a browser, just Android (which I'm not doing).</p>
  
  <p>Thanks!</p>