Hello,
I have an ionic angular project and I added google maps on it. When I run it on the web, the page of the map works correctly. I build it for android and also worked correctly. But when I build it for iOS the page with the map doesn’t work. So is there something i have to add on the info.plist? or anywhere else? because for android i added the api key and on AndroidManifest.xml to work.
Until now i added on the info.plist the following code for the location:
NSLocationUsageDescription
(Privacy - Allow current location to be used?)
NSLocationWhenInUseUsageDescription
(Privacy - Allow current location to be used?)
in the documentation only this is refer to google maps plugin…
Do you have any idea why this is happening?
Also I forget to mention that I’m trying my ios app on a simulator on the xcode, not on a phisical device. Can this be the reson why it doesn’t work?
Thanks in advance.
What do you mean when you say “the page with the map doesn’t work”?
Thank you for your reply, i mean that when I navigate to my page called “stores” I have a button that opens a new page with the map of this store.
Here you can see my app on broeser that show the map correctly:
And here is the iOS app that doesn’t show the map:
I have no errors in my code so I don’t know why this is happening…
Are you using Cordova or Capacitor?
I’m using capacitor. Actually, I’m trying to update an old app that used cordova. But I thought that capacitor is better and i wanted to cahnge to capacitor.
Good decision. I’m asking because of the Cordova related logs in the console.
So, when you have a mac mini from 2023, it’s most likely a silicon one. The google maps docs says the following:
The main Google Maps SDK now supports running on simulators on Apple Silicon Macs, but make sure you have the latest version of Google-Maps-iOS-Utils installed.
See here - Maybe you need to install that?
I’ve tried some solutions I found and now it works for one or two times and then again the same white screen…
I tried:
- Remove the fullscreen = true from my map.page.html
<ion-content [fullscreen]=“true”>
<capacitor-google-map #map>
- Updated the plugin
npm update @capacitor/google-maps
3.I did the solution yopu provided to me in the previous comment.
Actually i had to do these commands:
cd ios/App
pod update Google-Maps-iOS-Utils
- I tried and this Ionic Google Maps not showing for iOS-Devices with Angular - Stack Overflow
But still I only see it to work one time or tow and then i have these output from the XCode:
[log] - true
To Native → Geolocation getCurrentPosition 127845221
TO JS {“coords”:{“longitude”:-122.406417,“altitude”:0,“speed”:-1,“accuracy”:5,“latitude”:37.785834000000001,“altitudeAccuracy”:-1,“heading”:-1},“timestamp”:1706190273489}
To Native → CapacitorGoogleMaps create 127845222
TO JS undefined
2024-01-25 13:44:39.834 App[35814/0x206034240] [lvl=3] +[GMSx_CCTClearcutUploader crashIfNecessary] Multiple instances of CCTClearcutUploader were instantiated. Multiple uploaders function correctly but have an adverse affect on battery performance due to lock contention.
To Native → CapacitorGoogleMaps addMarker 127845223
TO JS {“id”:“-3567961341877997120”}
container_create_or_lookup_app_group_path_by_app_group_identifier: client is not entitled
container_create_or_lookup_app_group_path_by_app_group_identifier: client is not entitled
Also I upload my new code on testflight to test this with my iPad but it doesn;t work at all…
I solved my problem. I decided not to use the google-maps plugin because it doesn’t work on iOS as I saw to many open topics. Instead i used this script
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBNDwNF6Kp2oQ8ZDbJjBcDj7PBcqeIIFYs"></script>
on my index.html and Ι adapted my code on map.page.ts
And finally the map worked on iOS devices.
There’s a better solution that is better and easier to use than capacitor google maps: Official Angular Google Maps Component. 
Also supports ALL google maps methods.
