Google Maps で複数の円を描画した時円が重なった部分だけ地図を表示したい。

GoogleMapsAPIについての質問です。
タイトルの通り円が重なった部分だけ地図を表示するようにしたいです。

詳しく説明すると地図全体は不透明度1で黒く塗りつぶされていて
現在地点だけ別の色の円で塗りつぶすのですが現在地点だけ半径50m周辺だけ地図を表示するようにしたいです。
一応今のJSのコードをおいておきますがあまり参考にならないと思います。

function initialize(){
  var myOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }

  var lat=new Array();
  var lon=new Array();
  var polylines = [] ;
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // 精度UPあり
    var position_options = {
        enableHighAccuracy: true
    };

    // 現在位置情報を取得
    navigator.geolocation.watchPosition(function(position) {
    lat.push(position.coords.latitude);
    lon.push(position.coords.longitude);
    var BaseCircle;


        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(myLatlng);
    var circles = [] ;
    var baselatlng = new google.maps.LatLng( lat[0], lon[0] ) ;
    var basecircleOption = {
      center: baselatlng ,      // 中心の位置座標をLatLngクラスで指定
      radius: 1200000 , // 円の半径(メートル単位)
      map: map ,    // 設置する地図キャンパス
      fillOpacity: 1 ,
    } ;

    baseCircles = new google.maps.Circle( basecircleOption ) ;

    for(var i=0;i<lat.length;i++){

      var latlng = new google.maps.LatLng( lat[i], lon[i] ) ;
      var circleOption = {
          center: latlng ,      // 中心の位置座標をLatLngクラスで指定
          radius: 50 ,  // 円の半径(メートル単位)
          map: map ,
    // 設置する地図キャンパス
      } ;

      circles[i] = new google.maps.Circle( circleOption ) ;
    }
        // マーカーの表示
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
    }, null, position_options);
}
google.maps.event.addDomListener( window , 'load' , initialize ) ;

よろしくお願いします