IssueTracker

It would be good if a solution for this issue will be found soon. Lot of applications
have the feature that the mapframe can be resized.

[Comment deleted]

We will be removing that noResize option and we are actively working on a solution for
checkResize.

----edited----
Now I re-initialize map every time when changing canvas size occures - as temporary
solution.

Hi

What is the status on this?
The issue displays as "Fixed" but no solution is provided and GMap.checkResize() has
not been ported to the API 3.

Any help appreciated.

From the code linked in the first post:

google.maps.event.trigger(map, 'resize');

I'm using this to fix map which has been initialised in hidden DIV (having size 0x0)
and it works

It does not seem to work when you use % values instead of px values for the dimension
of the map div.

I'm initializing a map in a hidden div that is created using jquery's boxy plugin.
My map container has a fix width and a fixed height however when using

google.maps.event.trigger(map, 'resize');

The map would load but would be grey. After some experimentation I found a fix by
zooming in the map one level and then back out one level:

resize:function(){
  google.maps.event.trigger(this.map, 'resize');
  this.map.setZoom( this.map.getZoom() - 1 );
  this.map.setZoom( this.map.getZoom() + 1 );
}

I have the same issue.  What do you mean with:

resize:function(){
  google.maps.event.trigger(this.map, 'resize');
  this.map.setZoom( this.map.getZoom() - 1 );
  this.map.setZoom( this.map.getZoom() + 1 );
}

that's not working for me. Do you mean to overload the resize event with that code or some thing like that?

This issue still hasn't been fixed. Also, the above solution doesn't work for me. I
solved it by doing this:


google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize');
});    

this.map.setZoom( this.map.getZoom() - 1);
this.map.setZoom( this.map.getZoom() + 1);

I think the resize event is being triggered to soon, before the map has been
repainted after resizing.

My above solution was pulled from an internal function.
The simple solution is to run:

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

thank you vsumner, works perfect!
in fact it also fixed issue #766 for me :)

Do you guys have a test page for this corner case? I don't quite understand the problem.

Preferably without jQuery and/or jQuery plugins.

Hi, i there, is my first time using the google maps api, i am having problem with the render options. I have a div that contains the map, and another div that hide the half of the map and when you mouseover the div get a higher height to show the entire map, but its seem bad very bad the icons doesn look like png and stuff like, how i can resolve this?
If i put the map alone without any div the problem continue.

This is the code i am using:

google.load("maps", "3",  {other_params:"sensor=false"});

var map;
function initialize() {
  var mapDiv = document.getElementById('map');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(18.464182,-69.908366),
    zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    }
  });

  google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
 
}


function addMarkers() {
        var image = 'http://www.dunkerdental.com/images/map-marker.png';
    var latLng = new google.maps.LatLng(18.463990,-69.908018);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
          icon: image
    });
 
}

I get round this issue by delaying the resize trigger by 300ms (in ExtJS I use Ext.util.DelayedTask - you can do it in plain JavaScript with setTimeout() )

Solution in comment #12 works great :)

post #8 is correct, that method does not work when using % values for the size. however, re-initializing the map when the div is unhidden does the trick.

ex:

function(){
   $('#mapDIV').show();
   initialize();
});

[Comment deleted]

No need to reinitialize the whole map. Just trigger the resize event:

google.maps.event.trigger(map, 'resize');

---> google.maps.event.trigger(map, 'resize');

This works great, but the CENTER of the map is moved off the left top bounderies of the container!

Finally I got the solution!

Goal: Populate 2 text boxes with LATITUDE & LONGITUDE while moving a marker.

Case: Loading the map inside a hidden division with a single draggable marker.

Problem 1: Map itself shifts off to top left in the container.
Problem 2: After fixing Probelm 1, the marker shifts off to top left in the map.

Solutions: On the OnClick event of the image that is used to show/hide the map;

---> google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());

[Comment deleted]

#19 is right.
You should show the div before initialize it.
I stock 10 hours for this bug!

Solution under comment #11 worked great for me. Thanks!

Comment #12 worked for me, although I have multiple markers, so had to add a call to fitBounds() to get it to center properly:

google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
map.fitBounds(bounds);

Hello! I could do with a little help please?!

I am also having a problem with the google maps on hidden tabs not resizing when the tab is selected. I have tried just about every suggested solution but I'm not sure if I am inserting the fixes in the right place.

The code I'm using is below, I was wondering if someone could tell me where to try inseting the resize fixes?

(header)
<script type="text/javascript">

function initDexGoogleMap(canvas, width, w_unit, height, h_unit, latitude, longitude, p_zoom, p_mapType, p_navControl, p_navStyle,      p_navPosition, p_mapTypeC, p_mapTypeCStyle, p_mapTypeCPosition, p_scaleC, p_scaleCPosition, p_draggable, p_disableDoubleClickZoom, p_keyboardShortcuts, p_trafficL, p_bikeL, p_panoramio )

{document.write('<div id="'+canvas+'"></div>');

document.getElementById(canvas).style.width = width + w_unit; document.getElementById(canvas).style.height = height + h_unit;  

var latlng = new google.maps.LatLng(latitude,longitude);        
var myOptions = {zoom: p_zoom, center: latlng, navigationControl: p_navControl, navigationControlOptions: {style: p_navStyle, position: p_navPosition}, mapTypeControl: p_mapTypeC, mapTypeControlOptions: {style: p_mapTypeCStyle, position: p_mapTypeCPosition}, scaleControl: p_scaleC, scaleControlOptions:
{position: p_scaleCPosition}, mapTypeId: p_mapType, draggable: p_draggable, disableDoubleClickZoom:     p_disableDoubleClickZoom, keyboardShortcuts: p_keyboardShortcuts};      

 var map = new google.maps.Map(document.getElementById(canvas), myOptions);

(Body)

<div id="DEX_GContainer0">
<script type="text/javascript">var my_DEX_GContainer0 = initDexGoogleMap
("DEX_GContainer0","450","px","450","px",51.5313695, -0.1031838,16,google.maps.MapTypeId.ROADMAP,true,google.maps.
NavigationControlStyle.DEFAULT,google.maps.ControlPosition.TOP_LEFT,true,google.maps.MapTypeControlStyle.DEFAULT,google.maps.ControlPosition.TOP_RIGHT,true,google.maps.ControlPosition.BOTTOM_LEFT,true,false,true,false,false,false); addMarker(my_DEX_GContainer0,51.5313695,-0.1031838,false,"Fitness%20First","","","click","");
</script>
</div>

Hi, tkns for all, this solution works for me
sorry about my english, iam from mexico.  

I have a similar issue.  I'm initializing 2 maps, one in a showing DIV and one in a hidden.  The idea is to allow user to click a tab to switch between map views.  Thanks to everybody here.  I have tried just about every suggestion.  The page is somewhat working.  However, I still cant get it to work perfectly.  The following code is the best result so far.  Even with this, only partial map will show on the first click.  I have to click the button a second time to get the map to show correctly. Suspect there might be another .click function on the same DIV in another js file. It is so tricky to find a workaround.  Any suggestion here?

function init() {
    $(.gmap).gmap3( { action: 'init', .... });

    map1 = $(mapID1).gmap3('get');
    map2 = $(mapID2).gmap3('get');
    $("#switchmap").click(function () { resizeMap(map1) });
    $("#switchmap2").click(function () { resizeMap(map2) });
}


function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};  

hey guys,

I'm using the Google Maps api v3 to create a map which can be resized (the div is expanded and contracted using a jQuery toggle).  According to comment #21 (and the google documentation), I should call google.maps.event.trigger(map, 'resize'); when resizing the map.  I have done so, but I still have problems with the tiles refreshing.

You will see what I mean if you visit the page in question and expand the map then try to pan around:
http://monkeyhut.com.au/contact/

The code I am using is:

<script>
document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+ expand map</a>');

/* Expand map_canvas DIV */

jQuery('#expandMap').toggle(function(){
jQuery('a#expandMap').text('- contract map');
jQuery('a#expandMap').attr('title', 'Contract the map');
jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');                                                               }, function(){
                                                                jQuery('a#expandMap').text('+ expand map');                                                             jQuery('a#expandMap').attr('title', 'Expand the map');                                                          jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing');                                                               google.maps.event.trigger(map, 'resize');
});

/* Expand map_canvas DIV End */
</script>

Can anyone suggest any ideas? When expanded, if you click the contract button there is a flash where all the tiles are properly visible, so it looks like the resize event is triggered when contracting.  In contracted state, the map works perfectly; panning around all the tiles refresh as they should.

Really appreciate any help with this!

Cheers!

[Comment deleted]

Hi
I have the same map not showing correctly issue (the map is in one of the hidden div).  It works fine for me on the v2 with specifying the map size in google map script but there is no such function in v3 and it will not show correctly.  I tried google.maps.event.trigger({map}, 'resize') but doesn't work.  not sure if I am doing it right.  Below is the code for my js hidden div.  can someone please help me with the issue?


function hidestories() {
var divs=document.getElementById('stories').getElementsByTagName('div');
for (j=0; j<divs.length; j++) {
var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");
if (rE.test(divs[j].className)) {
divs[j].style.display="none";
}
}
}

function stories(first) {
var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');
for (i=0; i<thebuttons.length; i++) {
thebuttons[i].onclick=function() {
hidestories();
var thestory=(this.href).split("#",2)[1];
document.getElementById(thestory).style.display="block";
return false;
}
}
if (first) {
var firstone=document.getElementById('stories').firstChild;
if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
firstone.style.display="block";
}
}
window.onload=function() {
hidestories();
stories(1);
}

I followed comment #11 and it work. In my case have alot of markers with images.

thanks a lot for this, nothing would position the map correctly (although resize does display the tiles)
solution in Comment 23 works great for me

The Google Maps V3 rendering issue is not a conflict between jQuery and Google Maps API per se and the google.maps.event.trigger(map, 'resize') doesn't solve the problem as long as the map remains hidden within a container. To fix the bug, the map initialization must happen after the container is being shown, i.e when jQuery is sliding down or fading in something.

So doing something like the following would do the trick as opposed to call the initialize function after the page loads.:

$("button").click(function(){
    $("#map_canvas").slideToggle("slow");
    initialize()
}

Actually, the map would have rendered fine if the user were to re-size his browser window while looking at the partial map. Google solution google.maps.event.trigger(map, 'resize') works but only if you do something like setTimeout(function(){map.setZoom( map.getZoom() )}, 5000), but if the user after 5 seconds still didn't click on the button to SHOW the map, this will not work.

#19 was correct the div must show before page map loads..

This helped me alot thanks guys -- Although i had issues with where to put the majority of the fixes here, eventually i used this:

 $('#test1').delay(3000).gmap3(  

I load the map in a bootstrap modal popup the delay works really well, for page load too.. i attached it to the script with a click function...

Follow Post #19 if possible. That's a simple and stable way to solve this issue with a map in a hidden div ... just unhide the div first, then run the map code. This works if you are just performing a display:none to display:block or if you are using something like a .NET ModalPopupExtender with a $find('MapPop').show(); on a link to trigger the .NET Panel, then a call to initialize the map after the div is present.

hey all..

i spent 4hrs on this page trying all the fixes mentioned....but couldnt get any to work.
Then i came across this page and it helped me to solve my problem:
http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div

I implemented the 2nd solution on the above page....you can also look at the code here:
http://blog.codebusters.pl/demo/hidden_map_solution2.html

Good luck!

[Comment deleted]

Mareck!
thanks a lot for your solution in post #11!
you've saved me a lot of time :)

#17 worked for me. Clocked in 10 hours or so.

I solved it using Asynchronously Loading the API

https://developers.google.com/maps/documentation/javascript/tutorial#asynch

Hi,

Have the same problem as #30.
Is there yet a solution for this problem?

After wasting few hours the belode works fine. Call this after the map loaded or marker created..
setTimeout(function () {      
            google.maps.event.trigger(map, 'resize');
                    }, 100);

wow thnx guys, its solves my problem. awesome

Try

google.maps.event.trigger($("#googleMap")[0], 'resize');        //Refresh Map

With jQuery and it will work for every place

[Comment deleted]

google.maps.event.trigger($("#googleMap")[0], 'resize'); // not working

version: gmaps api-v3

Chrome Version 42.0.2311.135 m
--> canvas was set to width: 100%
--> resize was set

not all map tiles displayed when browser is NOT maximized
working fine when browser is maximized
works fine in all cases when canvas size is set to fix px

Hi i have an issue loading jquery gmap3 google map inside the bootstrap modal popup.The map display partially.can any one give a solution for this?

I had same issue using the gmap3 inside a bootstrap tab componenet http://getbootstrap.com/javascript/#tabs,  and the solution i've found was calling the resize event after the tab is shown :

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  google.maps.event.trigger(map, 'resize');
  map.setZoom( map.getZoom() );
})

Hope this can help.

I had the same problem with Streetview. The 'shown.bs.tab' hack solved my problem, when I changed the 'map' variable to 'panorama' (using the standard Google naming from the examples).

Thank you - after almost 3 hours of trial and error and searching through the net :)

#19 is the bomb! Thanks!!!
I spent several hours of debugging

#46 works for me, thanks!!

I needed to refresh an OverlayMapType of tiles every time an array was changed, and Mareck's solution in comment #11 worked for me, so thank you very much, Mareck and all. It amazes me that code that old still works, actually, for a tool with such a volatile and frequent update schedule.