Map not showing properly with ionic native

[laerciokonzen]

I'm submitting a ... (check one with "x") [ ] question [x] any problem or bug report [ ] feature request

The plugin version: (check one with "x") [ ] 2.0-beta3 (github) [x] 2.0 (npm)

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

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.4.0 "Google Maps SDK for iOS"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

If you use @ionic-native/google-maps, please show me the package.json

{
    "name": "App-EMDC",
    "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/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "^4.2.1",
        "@ionic-native/google-maps": "^4.3.0",
        "@ionic-native/native-storage": "^4.2.1",
        "@ionic-native/splash-screen": "4.2.0",
        "@ionic-native/status-bar": "4.2.0",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git",
        "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
        "cordova-plugin-nativestorage": "^2.2.2",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.4.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "ionic": "3.12.0",
        "typescript": "2.3.3"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-nativestorage": {},
            "cordova-plugin-googlemaps": {
                "API_KEY_FOR_ANDROID": "--------",
                "API_KEY_FOR_IOS": "--------",
                "LOCATION_WHEN_IN_USE_DESCRIPTION": "Show your location on the map",
                "LOCATION_ALWAYS_USAGE_DESCRIPTION": "Trace your location on the map"
            }
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

Current behavior: The map show on the correct div, but are not showing properly

Expected behavior: Show the map.

Steps to reproduce: Just create a page with the documented code: https://ionicframework.com/docs/native/google-maps/ And the html below:

<ion-header>
    <ion-navbar>
        <ion-title>Detalhes do produto</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <div id="map" style="width:100%; height: 400px;"></div>
    <ion-card>
        <!-- <img src="https://ionicframework.com/dist/preview-app/www/assets/img/advance-card-map-madison.png"> -->
        <ion-fab right top>
            <button ion-fab>
                <ion-icon name="pin"></ion-icon>
            </button>
        </ion-fab>
        <ion-card-content>
            <ion-card-title>
                <ion-icon name="ios-cart-outline" item-start large></ion-icon>
                {{produto.estabelecimento.nome}}
            </ion-card-title>
            <p>{{produto.estabelecimento.endereco}}</p>
        </ion-card-content>

        <ion-item (click)="openMap()">
            <!-- <span item-left>18 min</span> -->
            <button ion-button icon-left clear item-end>
                <ion-icon name="navigate"></ion-icon>
                Mapa
            </button>
        </ion-item>
    </ion-card>
    <ion-list>
        <ion-item>
            <ion-avatar item-start>
                <img src="{{produto.imagem}}">
            </ion-avatar>
            <h2>{{produto.nome}}</h2>
            <p>{{produto.estabelecimento.nome}}</p>
            <div item-end [ngClass]="{'produto-favorito': produto.favorito}">
                <div class="preco">R$ {{produto.preco}}</div>
                <div (click)="favoritar(produto, $event)">
                    <ion-icon class="favorito" name="{{produto.favorito ? 'md-star' : 'md-star-outline'}}">
                        {{produto.favorito ? 'favorito' : 'favoritar'}}
                    </ion-icon>
                </div>
            </div>
        </ion-item>
    </ion-list>
</ion-content>

Screen capture or video record:

Related code, data or error log (please format your code or data): No error are showing on console of chrome://inspect

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

[wf9a5m75]

Or

[laerciokonzen]

Perfect, I commonly develop for web and created a IP addresses restriction. :( Thank you for you realy fast reply.

[MariaC15]

@laerciokonzen Greetings, how are you? How do you effect the card and so that the map is automatically resized? I can not do it, I have that problem. You help me? Please

[laerciokonzen]

@MariaC15 I'm realy fine and I hope you do too. I think what you is talking are on my code.

<div id="map" style="width:100%; height: 400px;"></div>

If this not solve your issue, let me know more about your context.

[MariaC15]

@laerciokonzen Thank you for responding, I think you do not explain me well. In the capture of the details of the product I see how the card goes up and the map is resized, it adapts as the card goes up.

I'm interested in how you make that effect of the card and that the map is resized. I have tried to do that and the map does not resize.