I'm trying to darken most of the map except the region inside my circle, where I have a marker. Inside I want the map to be light. I'm trying to play around with setting the lightness of the map, but not sure if that's the correct approach? In my code below and in my Fiddle I can create a dark map, but I can't figure out how to make the area inside the circle light. See picture at bottom for example of what I'm trying to do.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var $styles = [{
stylers: [{
lightness: -60
}]
}];
var mapOptions = {
zoom: "",
zoomControl: "",
center: "",
disableDefaultUI: "",
draggable: "",
styles: $styles,
disableDoubleClickZoom: ""
}
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(37.9, -122);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 14,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: $styles
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
var circleOptions = {
//strokeColor: '#FF0000',
//strokeOpacity: 0.8,
//strokeWeight: 2,
//fillColor: "", //'#FF0000',
//fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(37.9, -122),
radius: Math.sqrt(5) * 100
};
var circle = new google.maps.Circle(circleOptions);
marker.bindTo('position', map, 'center');
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i>
</div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
</body>
</html>I want my map to look like this.
