Google Maps Show/hide Multiple Overlays

What I would like, are 2 custom overlays on a map, with the ability to show/hide both overlays separately using two buttons. Currently, I have 1 overlay that can be shown/hid with

Solution 1:

Keep a unique reference to each overlay (as suggested in the linked question).

Instead of this (which overwrites the reference to the first):

overlay = new SchipholOverlay(bounds, srcImage, map);overlay = new SchipholOverlay(bounds2, srcImage2, map);

Give them unique names or push them onto an array:

// in the global scopevar overlays = [];

        overlays.push(new SchipholOverlay(bounds, srcImage, map));
        overlays.push(new SchipholOverlay(bounds2, srcImage2, map));

Note: scrImage2 seems to be a typo.

  <inputtype="button" value="Toggle Visibility 1" onclick="overlays[0].toggle();"></input>
  <inputtype="button" value="Toggle Visibility 2" onclick="overlays[1].toggle();">

example (no images)