Is it possible to hide(toggle) the main map layer and display only the ground overlay image itself?

Question

I have a groundOverlay image and i want that the main map can be switched on/off so that only the overlay image can be displayed. is that possible?

PS: I am using the javascript api v3.

Answer 1

You may implement a custom MapType(which doesn't render Tiles), then you only need to toggle between this custom MapType and a built-in MapType(e.g. ROADMAP):

function initialize() {
  var goo = google.maps,
    map = new goo.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: new goo.LatLng(40.740, -74.18),
      mapTypeControl: false

    }),

    mt = function() {
      this.getTile = function() {
        var n = document.createElement('div');
        n.style.cssText = 'background:#fff;width:256px;height:256px;';
        return n;
      };
      this.tileSize = new google.maps.Size(256, 256);
      this.maxZoom = 20;
    },
    //maptype-control
    mtc = document.createElement('div');

  mtc.id = 'mtc';
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(mtc);

  google.maps.event.addDomListener(mtc, 'click', function() {
    console.log(map.getMapTypeId())
    map.setMapTypeId((map.getMapTypeId() === 'hidden') ? google.maps.MapTypeId.ROADMAP : 'hidden');
  });
  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    mtc.style.textDecoration = ((this.getMapTypeId() === 'hidden') ? 'none' : 'line-through');
  });

  map.mapTypes.set('hidden', new mt);
  map.setMapTypeId('hidden');

  new goo.GroundOverlay(
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    new goo.LatLngBounds(
      new goo.LatLng(40.712216, -74.22655),
      new goo.LatLng(40.773941, -74.12544)
    ), {
      map: map
    }
  );

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#mtc {
  border: 1px solid #000;
  background: tomato;
  padding: 2px;
  margin: 4px;
  cursor: pointer;
  font-size: 1.4em;
  font-weight: bold;
  border-radius:2px;
}
#mtc:after {
  content: 'Tiles';
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>