search

ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

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

Open edenmydev opened 2 years ago

edenmydev commented 2 years ago

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

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

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 commented 2 years ago

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

edenmydev commented 2 years ago

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

joshstrange commented 1 year ago

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?).