Brown/Unclickable part of Google Maps

Question

I'm new in using Google maps and I encountered this problem where when i change the size of the container of the maps,there is a brown part in my Maps that is Unclickable and undraggable

I made a button that closes a div and changes the size of the container of my Google Maps

Here is the Jquery that Changes the size of the Divs and map container

<script type="text/javascript">
    function clickHandler() {
        $('#hides').toggle();
        $('#shows').toggle()
        $('#settings').toggleClass('col-sm-9 col-sm-12');
        $('#resultcontainer').toggle('slow');

    }
    $(document).ready(function () {
        $('#shows').hide();
        $('#hides, #shows').on('click', clickHandler);

</script>

Here is the Screenshots:

As you can see, there's a brown part on the right side of the second photo that is unclickable and undraggable

This is my Initialize with Bounds set for USA

function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            geocode = new google.maps.Geocoder();

            LatLang = new google.maps.LatLng(38.50, -90.50);
            var addresse = {
                zoom: 4,
                center: LatLang,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), addresse);

            // Bounds for North America
            var strictBounds = new google.maps.LatLngBounds(
                      new google.maps.LatLng(15.70, -160.50),
                      new google.maps.LatLng(68.85, -55.90));

            // Listen for the dragend event
            google.maps.event.addListener(map, 'dragend', function () {
                if (strictBounds.contains(map.getCenter())) return;
                // We're out of bounds - Move the map back within the bounds

                var c = map.getCenter(),
                      x = c.lng(),
                      y = c.lat(),
                      maxX = strictBounds.getNorthEast().lng(),
                      maxY = strictBounds.getNorthEast().lat(),
                      minX = strictBounds.getSouthWest().lng(),
                      minY = strictBounds.getSouthWest().lat();

                if (x < minX) x = minX;
                if (x > maxX) x = maxX;
                if (y < minY) y = minY;
                if (y > maxY) y = maxY;

                map.setCenter(new google.maps.LatLng(y, x));
            });

            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });

        }

Answer 1

Call google.maps.event.trigger(map, 'resize'); function (so it wont affect your current activity with the map) on the event handler just after you resized your container.

For Example, this is where you change the size of your map container:

$("#btn").click(function(){
  $("#map").toggleClass("larger");
  google.maps.event.trigger(map, 'resize');
});

While, in the case of the brown lines in your map, I think there is/are element/s that is affecting it. You might want to try z-indexing and put the map on the uppermost.

Updated FIDDLE