IonicでGoogleMapを表示するときに引っかかったところ

個別のタブに組み込もうとすると上手くいかない

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
　<style>
      #map {
        height: 100%;
      }
  </style>
</ion-header>

<ion-content padding>
  <div id="map"></div>
  <script>
    function initMap() {
      let map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }
  <script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>
</ion-content>

HTMLに似ているからここに組み込もうとしたら上手く行かなかった。 Mapは画面に存在しているのに内容が表示されない状態に。

index.htmlに組み込む

index.htmlの中に記述するとしっかりと表示された。