Why Google Maps Cordova ionic angular, only working in Android and blank in IOS?

[IlhamINC]

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

• question
• [ x] any problem or bug report
• feature request

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

• Android
• [ x] iOS
• Browser

cordova information: (run $> ionic cordova plugin list)

com-badrit-base64 0.2.0 "Base64"
com.googlemaps.ios 3.8.0 "Google Maps SDK for iOS"
cordova-android-play-services-gradle-release 4.0.0 "cordova-android-play-services-gradle-release"
cordova-androidx-build 1.0.3 "cordova-androidx-build"
cordova-plugin-androidx 2.0.0 "cordova-plugin-androidx"
cordova-plugin-background-geolocation 3.1.0 "CDVBackgroundGeolocation"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-document-viewer 0.9.13 "SitewaertsDocumentViewer"
cordova-plugin-fcm-with-dependecy-updated 6.3.1 "Cordova FCM Push Plugin"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-filepath 1.5.8 "cordova-plugin-filepath"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-googlemaps 2.8.0-20200601-1013 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-iroot 0.8.1 "iRoot"
cordova-plugin-nativegeocoder 3.4.0 "NativeGeocoder"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 3.0.0-dev "StatusBar"
cordova-plugin-vibration 3.1.1 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
es6-promise-plugin 4.2.2 "Promise"

package.json information:

"@ionic-native/core": "^5.22.0-beta-1",
"@ionic-native/google-maps": "^5.5.0",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",

Current behavior:
Google Maps is blank but it shows Google logo, Everything normal in Android.

I have added this line in config.xml :

<preference name="GOOGLE_MAPS_IOS_API_KEY" value="MY_API_KEY" />

Also, i've enable Google Maps for IOS and restrict with my bundle id (com.xxxxx.hris) as well.
Here the restrict information :

Maps SDK for iOS
Geocoding API
Geolocation API
Maps SDK for Android
Places API
Maps Static API

Expected behavior:
It should be running fine like Android

Screen capture:
[Android]

[iOS]

[wf9a5m75]

Gray map means your API key problem (always)

[IlhamINC]

How can i do ? i've done everything with my api keys. Like enable Google maps for ios, set application restrict to ios, give budle id, and restrict the key. Is there anything i missed?

[wf9a5m75]

Try to regenerate an API key, and do not set any restrictions for test

[wf9a5m75]

And don't forget to do ionic Cordova build ios after changing config.xml

[IlhamINC]

1. Regenerate API Key, set Application restrictions to none and set API restrictions to Don't restrict key
2. set to new api key for ios in config.xml
3. run ionic cordova build ios
4. Open xcworkspace project from platform -> ios folder and build it

still with the issue, even i set back all restrict setting with new key. Issue still there.

[wf9a5m75]

Ok, please share your project files on GitHub repository. I will check your code.

[IlhamINC]

Can i upload with Google Drive and sending the link through your email?

[wf9a5m75]

I'm sorry, but please don't do that. I'm really busy person, that's why I check your code either from PC or my phone.
But sending a zip file, or sharing on Google Drive (and others) are not good when I check from my phone.

For the reason, please use Git repository (I don't mind public or private)

[IlhamINC]

Hi @wf9a5m75 im so sorry for late reply, I've invite you to access my repo.

Thanks for fast response.

[wf9a5m75]

Thank you for sharing your code.

I got an error. Xcode says Value for SWIFT_VERSION cannot be empty.
Could you tell me what version number should specify for this?

[IlhamINC]

I use version 4.2

[wf9a5m75]

Thank you for sharing your code and information.
I tried to run your app, but I could not login. And I also checked native code, but no problems at all.

Then I run a simple map code with your API key, and my API key.

With your API key, I can not see the map.

But with my API key, I can see the map.

In conclusion, your API key has problem

[IlhamINC]

Do you pay for your api keys ?
If yes, how much it cost you ?

[wf9a5m75]

I don't pay anything, but must be registered your credit card

[WaseemRakab]

i have same issue here, both ios and android doesn't show the map, it just displays blank transparent page without google logo at all.

[wf9a5m75]

@WaseemRakab
Google Maps view in Android/iOS are placed under the browser view.
I think you covered on the map

[WaseemRakab]

@WaseemRakab
Google Maps view in Android/iOS are placed under the browser view.
I think you covered on the map

@wf9a5m75
how can i fix this to show on the browser view ?
im trying to fix this for 2 days now, no luck.
this the my code
HTML:

<ion-header>
    <ion-toolbar color="blue" class="my-city-toolbar blue">
        <ion-title>
            {{'report_address.title' | translate}}
        </ion-title>
        <ion-buttons slot="end" (click)="dismissModal();">
            <ion-icon name="close" class="close-icon"></ion-icon>
        </ion-buttons>
    </ion-toolbar>
    <ion-toolbar style="padding-top: 10px">
        <ion-buttons slot="end">
            <ion-button color="primary"
                        [disabled]="address === undefined"
                        (click)="save()">
                {{'report_address.continue_button' | translate}}
                <ion-icon slot="end" src="assets/icon/arrow-round-forward.svg"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-searchbar animated [value]="searchedAddressValue"
                       placeholder="{{'search_address'| translate}}">
        </ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div id="map_canvas"></div>
</ion-content>

ts:

        const mapOptions: GoogleMapOptions = {
            mapType: 'MAP_TYPE_ROADMAP',
            camera: {
                target: {
                    lat: this.userLocation.lat,
                    lng: this.userLocation.lng
                },
                tilt: 30,
                zoom: 14,
            },
            controls: {
                myLocation: true,
                myLocationButton: true,
                zoom: true,
                compass: true,
            }
        };
        const map = GoogleMaps.create('map_canvas', mapOptions);
        Environment.setBackgroundColor('white');
        await this.googleMapsService.loadMap(map, this.userLocation,
            true,
            false,
            (data) =>
                this.onAddressReceivedData(data)
        );
        map.one('MAP_READY').then(async () => {
            await this.loadingRef.dismiss();
        });
}```
css: 
#map_canvas {
  width: 90%;
  height: 80%;
  border: 1px solid red;
}
thanks for reply.

[WaseemRakab]

@wf9a5m75
and MAP_READY event never been invoked, idk what's the issue here.
i was using google maps javascript api instead of this, all was working fine, until i switched to this plugin.

[wf9a5m75]

Please share your project files on github repository.
I can't get detail information of the pasted code.

[WaseemRakab]

it's a private project, nvm i switched back to JavaScript api, as this plugin is broken for me
followed all instructions in docs, tested on 3 android devices also. not working.
thanks for help anyway.

[wf9a5m75]

You can share your private repo. I didn't ask you the repo must be public.

Even if you don't, I recommend you try to use this plugin from a simple project.

[WaseemRakab]

@wf9a5m75
I will try to use it in simple project, and find out what were the issue in the private project if i succeeded.
because honestly i find the plugin really helpful, and good overall.
thanks for help.

[WaseemRakab]

@wf9a5m75
quick question? could this problem occur when im loading the map inside of a ionic Modal ?? !!
i did not try to use this plugin in a single page.

[wf9a5m75]

This plugin displays a map view under the browser view in Android and iOS. Thus, you cannot display a map in modal.

[WaseemRakab]

@wf9a5m75 sorry, but i do not understand the reference by "under the browser", where could the map be rendered then? and how to actually make the map visible in the browser view in ionic capacitor project under angular environment?
end of point, how to fix this? I didn't get it.

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work-android-ios

[WaseemRakab]

@wf9a5m75 you're not helping by sending this link..
as i have already read all docs.

[wf9a5m75]

Map is not rendered in <body>. Thus, you can not display the map in modal dialog.

[wf9a5m75]

As I suggested, you should try from a simple project.

[WaseemRakab]

@wf9a5m75
just tried from simple project. it's working perfectly.
the problem was i'm loading the map inside of a modal instead of a complete page.
will fix it later, thanks.