So by now we're familiar with adding shapes to a Google map with the v3 API:
$j('#map').gmap('addShape', 'Circle', { 'strokeWeight': 0, 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': result[0].geometry.location, 'radius': 1500, 'clickable': false }); The above code will create a circle and shade it with fill #008595. Is there any way to inversely shade a map? I would like the entire world to be shaded/filled at half opacity except for a hole where my markers are. Possible?
you need to define a polygon that covers the whole world and has a hole in it, you can't do it with the "Circle" or "Rectangle" shapes, it has to be a polygon with (at least) two paths.
here is an example
related questions:
code snippet:
// This example creates circles on the map, representing // populations in the United States. // First, create an object containing LatLng and population for each city. var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(41.878113, -87.629798), population: 2842518 }; citymap['newyork'] = { center: new google.maps.LatLng(40.714352, -74.005973), population: 8143197 }; citymap['losangeles'] = { center: new google.maps.LatLng(34.052234, -118.243684), population: 3844829 }; var cityCircle; var bounds = new google.maps.LatLngBounds(); function drawCircle(point, radius, dir) { var d2r = Math.PI / 180; // degrees to radians var r2d = 180 / Math.PI; // radians to degrees var earthsradius = 3963; // 3963 is the radius of the earth in miles var points = 32; // find the raidus in lat/lon var rlat = (radius / earthsradius) * r2d; var rlng = rlat / Math.cos(point.lat() * d2r); var extp = new Array(); if (dir == 1) { var start = 0; var end = points + 1 } // one extra here makes sure we connect the ends else { var start = points + 1; var end = 0 } for (var i = start; (dir == 1 ? i < end : i > end); i = i + dir) { var theta = Math.PI * (i / (points / 2)); ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) extp.push(new google.maps.LatLng(ex, ey)); bounds.extend(extp[extp.length - 1]); } return extp; } function initialize() { // Create the map. var mapOptions = { zoom: 4, center: new google.maps.LatLng(37.09024, -95.712891), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var outerbounds = [ new google.maps.LatLng(85, 180), new google.maps.LatLng(85, 90), new google.maps.LatLng(85, 0), new google.maps.LatLng(85, -90), new google.maps.LatLng(85, -180), new google.maps.LatLng(0, -180), new google.maps.LatLng(-85, -180), new google.maps.LatLng(-85, -90), new google.maps.LatLng(-85, 0), new google.maps.LatLng(-85, 90), new google.maps.LatLng(-85, 180), new google.maps.LatLng(0, 180), new google.maps.LatLng(85, 180) ]; var populationOptions = { 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 = new google.maps.Polygon(populationOptions); map.fitBounds(bounds); } google.maps.event.addDomListener(window, 'load', initialize);html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div>