Question

I want the map to be opened on full-screen. I’ve tried this:

<div class="b-firm-map-content" id="map"></div>
<a href="#" onclick="test2();return false;" >full screen</a>

    function test2(){
    var width  = $(window).width()-3;
    var height = $(window).height();


    $('#map').css({
        'width': width,
        'height': height - 40 ,
        'position': 'absolute  ',
        'z-index'   : '900'
    });

 }

but it result in:

• http://pixs.ru/showimage/Snimokpng_5811285_6065704.png
• http://pixs.ru/showimage/Snimok1png_4265065_6065745.png

My map not completely displayed.

Answer 1

Update your test2() function like this:

function test2(){
  var width  = $(window).width()-3;
  var height = $(window).height();

  $('#map').css({
    'width': width,
    'height': height - 40 ,
    'position': 'absolute  ',
    'z-index'   : '900'
  });

  google.maps.event.trigger(your_map, 'resize');
}

Replace your_map with the variable name that holds the map object.

It’s the solution to the fact that the API does not know when you programatically resize the map container. From the documentation:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, ‘resize’) .