Change Map Opacity Outside Circle Of Google Maps Javascript Api V3

So I'm currently putting a circle on my map: var optionsCercle = { center: latlang, map: map, radius: 1000, fillOpacity: 0.1, strokeWeig

Solution 1:

An example that puts a circular "hole" over New York City (modified from this Google Example):

varcitymap= {};
citymap['newyork'] = {
  center: newgoogle.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};

var cityCircle;
varbounds=newgoogle.maps.LatLngBounds();

function drawCircle(point, radius, dir) { 
  vard2r= Math.PI / 180;   // degrees to radians varr2d=180 / Math.PI;   // radians to degrees varearthsradius=3963; // 3963 is the radius of the earth in miles use 6371 if using kilometersvarpoints=32; 

  // find the raidus in lat/lon varrlat= (radius / earthsradius) * r2d; 
  varrlng= rlat / Math.cos(point.lat() * d2r); 

  varextp=newArray(); 
  if (dir==1)   {var start=0;var end=points+1} // one extra here makes sure we connect the endselse      {var start=points+1;var end=0}
  for (var i=start; (dir==1 ? i < end : i > end); i=i+dir) { 
    vartheta= Math.PI * (i / (points/2)); 
    varey= point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) varex= point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(newgoogle.maps.LatLng(ex, ey)); 
    bounds.extend(extp[extp.length-1]);
  } 
  return extp;
}

function initialize() {
  // Create the map.varmapOptions= {
    zoom: 4,
    center: newgoogle.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  varouterbounds= [ // covers the (mercator projection) worldnewgoogle.maps.LatLng(85,180),
    newgoogle.maps.LatLng(85,90),
    newgoogle.maps.LatLng(85,0),
    newgoogle.maps.LatLng(85,-90),
    newgoogle.maps.LatLng(85,-180),
    newgoogle.maps.LatLng(0,-180),
    newgoogle.maps.LatLng(-85,-180),
    newgoogle.maps.LatLng(-85,-90),
    newgoogle.maps.LatLng(-85,0),
    newgoogle.maps.LatLng(-85,90),
    newgoogle.maps.LatLng(-85,180),
    newgoogle.maps.LatLng(0,180),
    newgoogle.maps.LatLng(85,180)];

    // options for the polygonvarpopulationOptions= {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      paths: [outerbounds,drawCircle(citymap['newyork'].center,10,-1)]
    };
    // Add the circle for this city to the map.
    cityCircle = newgoogle.maps.Polygon(populationOptions);
    map.fitBounds(bounds);
}

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

Working example

Solution 2:

{-Lat, (Long-180)%180, 20037508.34-Radius} workes well for me, Thx to Bahram Ardalan. Here my Code:

lat=53;lng=10;distance=10*1000;//10kmnewgoogle.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:this.map,center: {lat:-1*lat, lng:(lng-180)%180},radius:20037508.34-distance

Solution 3:

Draw a circle in the opposite location and complement radius like

{-Lat, (Long-180)%180, 20037508.34-Radius}