How do I resize a Google Map with JavaScript after it has loaded

Question

I have a  mapwrap  div set to 400px x 400px and inside that I have a Google  map  set to 100  x 100   So the map loads at 400 x 400px  then with JavaScript I resize the  mapwrap  to 100  x 100  of the screen - the google map resizes to the whole screen as I expected but tiles start disappearing before the right hand edge of the page   Is there a simple function I can call to cause the Google map to re-adjust to the larger size  mapwrap  div

User · Answer

The popular answer google maps event trigger map   resize    didn t work for me alone    Here was a trick that assured that the page had loaded and that the map had loaded as well  By setting a listener and listening for the idle state of the map you can then call the event trigger to resize     document  ready function         google maps event addListener map   idle   function            google maps event trigger map   resize                    This was my answer that worked for me

User · Answer

for Google Maps v3  you need to trigger the resize event differently  google maps event trigger map   quot resize quot     See the documentation for the resize event  you ll need to search for the word  resize    http   code google com apis maps documentation v3 reference html event  Update This answer has been here a long time  so a little demo might be worthwhile  amp  although it uses jQuery  there s no real need to do so   x000D   x000D    function       var mapOptions         zoom  8      center  new google maps LatLng -34 397  150 644         var map   new google maps Map     map-canvas   0   mapOptions         listen for the window resize event  amp  trigger Google Maps to update too     window  resize function             the  map  here is the result of the created  var map        above      google maps event trigger map   resize              x000D  html  body     height  100      map-canvas     min-width  200px    width  50     min-height  200px    height  80     border  1px solid blue    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt script src  https   maps googleapis com maps api js v 3 exp amp dummy  js  gt  lt  script gt  Google Maps resize demo  lt div id  map-canvas  gt  lt  div gt  x000D   x000D   x000D   UPDATE 2018-05-22 With a new renderer release in version 3 32 of Maps JavaScript API the resize event is no longer a part of Map class  The documentation states  When the map is resized  the map center is fixed  The full-screen control now preserves center   There is no longer any need to trigger the resize event manually     source  https   developers google com maps documentation javascript new-renderer google maps event trigger map   quot resize quot    doesn t have any effect starting from version 3 32

User · Answer

If you re using Google Maps v2  call checkResize   on your map after resizing the container   link  UPDATE  Google Maps JavaScript API v2 was deprecated in 2011  It is not available anymore

User · Answer

First of all  thanks for guiding me and closing this issue  I found a way to fix this issue from your discussions  Yeah  Let s come to the point  The thing is I m Using GoogleMapHelper v3 helper in CakePHP3  When i tried to open bootstrap modal popup  I got struck with the grey box issue over the map  It s been extended for 2 days  Finally i got a fix over this   We need to Update the GoogleMapHelper to fix the issue  Need to add the below script in setCenterMap function  google maps event trigger   id     resize       And need the include below code in JavaScript  google maps event addListenerOnce   id    idle   function       setCenterMap new google maps LatLng   this- gt defaultLatitude         this- gt defaultLongitude

User · Answer

This is best it will do the Job done  It will re-size your Map   No need to inspect element anymore to re-size your Map  What it does it will automatically trigger re-size event        google maps event addListener map   idle   function                         google maps event trigger map   resize                         map array Next  setZoom  map getZoom   - 1        map array Next  setZoom  map getZoom     1

[javascript] How do I resize a Google Map with JavaScript after it has loaded?

Examples related to javascript

Examples related to css

Examples related to google-maps