Ionic-native-google-maps: [GoogleMaps] Minimum container dimention is 100x100 in pixels

Created on 11 Jul 2018 · 10Comments · Source: ionic-team/ionic-native-google-maps

hello everybody,
thanks for your effort in this awesome plugin.
When trying to load the map. I got this error [GoogleMaps] Minimum container dimension is 100x100 in pixels.

ionViewWillEnter()
  {
    this.loadMap();
  }
loadMap() {

    // Create a map after the view is loaded.
    // (platform is already ready in app.component.ts)
    this.map = GoogleMaps.create('map_canvas', {

      camera: {
        target: {
          lat: 24.713552,
          lng: 46.675296
        },
        zoom: 18,
        tilt: 30
      }
    });

    // Wait the maps plugin is ready until the MAP_READY event
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      this.mapReady = true; 
      var w = this.map.getDiv().offsetWidth;
      var h = this.map.getDiv().offsetHeight;
      console.log("height" + h + "width"+w);

      this.get_your_location();

    });
    this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((params: any[])  =>
      {
         this.map.clear();         
            let latLng: ILatLng = params[0];
            this.map.addMarkerSync({
              "position": latLng
            });      
            this.Get_address_by_Lat_lng(latLng["lat"], latLng["lng"]);      
      }
    );
  }

My Package.json

{
  "name": "Green",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "^4.8.0",
    "@ionic-native/geolocation": "^4.9.0",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/onesignal": "^4.8.0",
    "@ionic-native/social-sharing": "^4.8.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic-native/unique-device-id": "^4.9.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "cordova-android": "7.0.0",
    "cordova-android-play-services-gradle-release": "^1.4.3",
    "cordova-android-support-gradle-release": "^1.4.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.3.6",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "onesignal-cordova-plugin": "^2.4.1",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "onesignal-cordova-plugin": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyBtFtgozwjRT_KY5AmzhvDmWfxer5T_UbU",
        "API_KEY_FOR_IOS": "AIzaSyBtFtgozwjRT_KY5AmzhvDmWfxer5T_UbU",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-android-play-services-gradle-release": {
        "PLAY_SERVICES_VERSION": "15.+"
      },
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "Allow Green to get your location"
      },
      "cordova-plugin-uniquedeviceid": {}
    },
    "platforms": [
      "android"
    ]
  }
}

not bug

Source

MohamedBesher

Most helpful comment

I solved this problem!
In my project I had two pages with GoogleMaps each one with the div id="map"
When I changed id="map" to another id, example id="map1" in one of these pages I have solved the problem.

This is my case.

jalbertos on 1 Oct 2018

👍3 👎2

All 10 comments

It means the map div must be bigger than width 100px and height 100px.

wf9a5m75 on 11 Jul 2018

thanks, @wf9a5m75 I knew what is that means. but what makes it less than width 100px and height 100px.
but the first time map works and there is something after redirect to page again

my controllers work in lazy loading and this my scss

page-get-your-location {
  .map-container {
    height: 100%;
  }
        .Location__title{
          padding-left: 10px;
          padding-right: 10px;
        }
        #map_canvas {
         height: 100% !important;
         width: 100% !important;
         top: 0;
         left: 0;
         position: absolute;
        }
}

and my HTML

<ion-header>
    <ion-navbar color="secondary">
      <ion-title>{{ 'getYourLocation-title' | translate }}</ion-title>
    </ion-navbar> 
  </ion-header>
  <ion-content class="map-container">  
  <div id="map_canvas">
    <button ion-button color="light" (click)="onButtonClick($event)"><ion-icon name="locate"></ion-icon>
    </button>
  </div>
  </ion-content>
  <ion-footer>
    <ion-row>
        <ion-col col-12>
      <p class="Location__title">{{address}}</p>
</ion-col>
      <ion-col col-6>
        <button ion-button color="secondary" full (click)="payment()" >{{ 'complete' | translate }} </button>      </ion-col>
      <ion-col col-6>
          <button ion-button color="danger" (click)="back()"full>{{ 'cancel' | translate }}</button>
        </ion-col>
    </ion-row>
  </ion-footer>

MohamedBesher on 14 Jul 2018

@MohamedBesher has you solved this problem?

YeisonVelez11 on 16 Jul 2018

👍2

I got the same error after redirect back for edit information,
It works fine for the first time.

mihirp1730 on 16 Jul 2018

I think the tab page makes this problem.

MohamedBesher on 17 Jul 2018

I'm not using tab between this two pages.
One is my booking page and another one is the summary page, the summary page has an edit button and when it came back from booking edit page it shows white screen on the summary page.
first time loads well.

mihirp1730 on 17 Jul 2018

@mihirp1730 try to pop up the page when you leave it.

MohamedBesher on 21 Jul 2018

Hi i've the same problems (https://github.com/mapsplugin/ionic-googlemaps-starter-tab/issues/3) and i'm using a ionic starter tabs project..
some help?

Ionic:

ionic (Ionic CLI) : 4.1.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 5 other plugins)

System:

ios-deploy : 2.0.0
ios-sim : 5.0.13
NodeJS : v8.11.4 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000