CODEWITHSUNDEEP
jquerygoogle-maps-api-3
Bill Blankenship
Bill Blankenship

Reputation: 3356

Google Maps -> How can I darken map and disable it fully after a user clicks a button

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.

Upvotes: 1

Views: 1127

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50797

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

Upvotes: 1

Related Questions