Error: DIV[#map_canvas] is too small. Must be bigger than 100x100

[edenmydev]

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS
• Browser

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-advanced-http 3.1.0 "Advanced HTTP plugin"
cordova-plugin-androidx-adapter 1.1.3 "cordova-plugin-androidx-adapter"
cordova-plugin-androidx 3.0.0 "cordova-plugin-androidx"
cordova-plugin-app-version 0.1.12 "AppVersion"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-email-composer 0.9.2 "EmailComposer"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 4.1.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-nativegeocoder 3.4.1 "NativeGeocoder"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
uk.co.workingedge.phonegap.plugin.launchnavigator 5.0.5 "Launch Navigator"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^5.30.0",
"@ionic-native/google-maps": "^5.5.0",

Current behavior:

I get sometimes in production the error: Error: DIV[#map_canvas] is too small. Must be bigger than 100x100.

I don't know when it happens.

Expected behavior:
No error
Screen capture or video record:
no

Related code, data or error log (please format your code or data):
Here my html and css implementation:

#map_canvas { display: table-row; height: 100%; width: 100%; }

[wf9a5m75]

That's not a bug. You must assign a div bigger than 100px x 100px

[edenmydev]

height: 100%; width: 100%; is the max I can set and it doesn't work

[joshstrange]

I had this issue as well when I had 2 maps in my app. I think one of the places was being kept "alive"/potentially just hidden and so if that version was loaded first the second location would fail with the above error (and yes, I had min-width/min-height set and the space was much larger than 100x100).

I was using the same HTML id for both locations, once I renamed one of them this error went away. My best guess is that either my second page was still able to grab a reference to the first page's div OR maybe something internal to the cordova plugin doesn't play nice with 2 divs with the same id even when only 1 is rendered at a time (something like internal caching?).