Cordova-plugin-googlemaps: Minimum container dimension is 100x100 in pixels error

[tennist]

After upgrading to the latest version of this plugin, I am getting an error of minimum container dimension is 100x100 in pixels and the map does not render. I know that the div I have for the map is much larger than 100x100 pixels. If I print div.style.height and div.style.width to the console prior to my plugin.google.maps.Map.getMap(div, mapOptions) function, I get a height of 358px and a width of 358px. However, when I print div.offsetWidth and div.offsetHeight to the console I get a height of 0 and a width of 0. There is clearly a 358px x 358px open space on my page that the map gets rendered on.

[wf9a5m75]

Please share your project files on github.

[tennist]

Here is a link to the project files

https://github.com/tennist/drupalgap-test-map

[tennist]

I forgot to mention that you will need to add the android platform to the project before building it out.

[wf9a5m75]

If I insert code like this,

it seems 0 x 0 pixels.

[wf9a5m75]

However, when I print div.offsetWidth and div.offsetHeight to the console I get a height of 0 and a width of 0. There is clearly a 358px x 358px open space on my page that the map gets rendered on.

It's your programing problem, not this plugin.
You must specify a div which is larger than 100x100 pixels BEFORE Map.getMap().

[tennist]

I generate the div in my page call back, then I initialize the map in the pageshow event. The div is already specified and should be loaded prior to initializing the map.

[wf9a5m75]

I don't know DrupalGap lifecycle, and I'm not interested in.
Important thing is the <div> must be larger than 100x100px BEFORE executing Map.getMap(). That's all.

[tennist]

Thanks for your help here. You got me pointed in the right direction by suggesting that the div wasn't completely rendered yet. The page is supposed to be completely loaded before drupalgap's pageshow events are fired, but it appears this is not not entirely true. I wrapped my pageshow code in a 250ms timeout function and the map is working once again. You can mark this as fixed. Thanks again!

[tennist]

That is as far as my experience goes on this. You usually get this error if the container has not been created yet.

Device ready doesn't necessarily mean the page is loaded, but I imagine it should be after a 5sec timeout. I would suggest placing your code in a pageshow event.

Also for a timeout I would suggest the following:
setTimeout(function() { map= plugin.google.maps.Map.getMap(mapDiv); }, 5000);

[YeisonVelez11]

@tennist so what can I use instead of deviceready? Within 2 hours I arrive at my house I will try and tell you. thank you very much. although the timeout does the same of the setTimeout ..

[tennist]

my app uses the jQuery Mobile pageshow event. This triggers code once the page is shown.

https://api.jquerymobile.com/1.3/pageshow/

I believe this is deprecated as of JQM 1.4, but I use JQM 1.3. There is a similar feature in 1.4 you can research if you wish to use the newest version.

[YeisonVelez11]

in my case with timeout should be works... I use setTimeout and not works :( same problem

[tennist]

It sounds to me that your getMap is being called before the page is shown. Do you have JQM loaded into your app? If so, use the pageshow event. If not, I would suggest loading it just to test and see if the pageshow works for you.

[YeisonVelez11]

excuse me my ignorance what is JQM

[tennist]

jQuery Mobile as described a few comments up the page. I also provided a link to the pageshow event documentation in that comment.

[setu1421]

I am facing the same problem today. Is there any solution?