title: Ionic Google Maps not showing for iOS-Devices with Angular
body: <p>I am currently working on an Ionic-Project where I want to include Google Maps in my application. Therefore, I consulted the <a href="https://capacitorjs.com/docs/apis/google-maps?__hstc=57877749.471e77c23a72316b3a13edf494fb5d46.1653314758443.1653322683929.1653334497067.4&amp;__hssc=57877749.1.1653334497067&amp;__hsfp=2161859060&amp;_gl=1*hvwjc3*_ga*NTQwNzk1ODg5LjE2NTMzMTQ3NTg.*_ga_REH9TJF6KF*MTY1MzMzNDQ5NS41LjAuMTY1MzMzNDQ5NS4w" rel="nofollow noreferrer">official capacitor Google Maps plugin</a>. I got it working on the web, but on an iOS-Device my map is not showing.</p>
  <p>** What did I do? **</p>
  <ol>
  <li>Installing the required packages:</li>
  </ol>
  <pre><code>npm install @capacitor/google-maps
  npx cap sync
  </code></pre>
  <ol start="2">
  <li>Updated the Info.plist file (/Users//project/ios/App/App/Info.plist). Set the following parameters:</li>
  </ol>
  <pre><code>&lt;key&gt;NSLocationAlwaysUsageDescription&lt;/key&gt;
  &lt;string&gt;Privacy We need your Location Always&lt;/string&gt;
  &lt;key&gt;NSLocationWhenInUseUsageDescription&lt;/key&gt;
  &lt;string&gt;Privacy We need your Location when App is in usage&lt;/string&gt;
  </code></pre>
  <ol start="3">
  <li>Updated the Angular project and added a component</li>
  </ol>
  <pre><code>map.component.html:
  &lt;capacitor-google-maps #map&gt;&lt;/capacitor-google-maps&gt;
  &lt;ion-button (click)=&quot;createMap()&quot;&gt;Create Map&lt;/ion-button&gt; 
  </code></pre>
  <pre><code>map.component.scss:
  capacitor-google-maps {
    display: inline-block;
    width: 275px;
    height: 400px;
    border: 3px solid red; 
  }
  </code></pre>
  <pre><code>
  map.component.ts:
  import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
  import { GoogleMap } from '@capacitor/google-maps';
  
  @Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss'],
  })
  export class MapComponent implements OnInit {
    @ViewChild('map')
    mapRef: ElementRef&lt;HTMLElement&gt;;
    newMap: GoogleMap;
  
  
    constructor() {
    }
  
    ngOnInit() { }
  
    async createMap() {
      this.newMap = await GoogleMap.create({
        id: 'my-map',
        element: this.mapRef.nativeElement,
        apiKey: key,
        config: {
          center: {
            lat: 33.6,
            lng: -117.9,
          },
          zoom: 8,
        },
      });
    }
  
  }
  
  </code></pre>
  <p>** Version **</p>
  <ul>
  <li>Ionic 6.19.1</li>
  </ul>
  <p>When I start my application with the command <code>Ionic capacitor run ios -l —external</code> the simulator starts. Further, in my web-browser the map opens up if I press the button. But in my iOS-Environment it does not work.
  Any suggestions? Thank you in advance!</p>
  <p><strong>EDIT:</strong>
  I have read that the Google Maps SDK is not supported on my M1 MacBook. Therefore, I installed the app on my local iPhone, but unfortunately this did not solve my issue.</p>