Question

So, I have created many map applications before, but the one that I am working on currently actually has some interaction to it.

Users can click markers and accept them and the data is saved after they click a button external to the map but on the same page.

At that point I am displaying a bunch of data regarding what happened in some divs outside the map.

What I want to occur now is that I want the map to darken kind of like a transparent black to give it the look that it is no longer functional and disable the map alltogether.

If you have ever worked with fancybox it would be similar to what the background screen looks like when a fancybox pulls up.

Any thoughts or ideas on this would be greatly appreciated I have been searching around but really haven’t found any way to do this yet.

Answer 1

I might as well make it an answer with a fiddle.

jsFiddle -> http://jsfiddle.net/HB324/

The HTML ->

<div id="hide_map">
  <a href="#"> Click Me To Hide Map </a>
</div>
<div id="map_canvas"></div>

The CSS ->

#map_canvas{
 position:relative;
 height:300px;
 width:300px;    
}

.overlay{
  position:absolute;
  top:0;
  left:0;    
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
}

The JavaScript ->

var geocoder;
var map;
var latlng;
jQuery(document).ready(function() {

        geocoder = new google.maps.Geocoder();
          var address = 'United States';
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              latlng=results[0].geometry.location;
              var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              var marker = new google.maps.Marker({
                  map: map,
                  position: latlng,
                  title:address
              });
            }
          });
    });

Edit: Forgot CSS, added CSS