ionicでするGoogleMapの表示、非表示

はじめに

GoogleMapをionicで表示させたかったのですが、言語がtsなので少しうまく行かなかったので、少し力技ですがindex.htmlでGoogleMapをつかいました。

index.htmlのコード

//<head>タグに追加
<style>
      #map {
        height: 70%; //ここで地図の大きさは自由に調節できます
        width: 70%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
</style>

//<body>タグに追加
<div id="map"></div> //ここのID部分にマップを追加するのでIDは控えておいて下さい
<script>
    function initMap() {
      console.log("index");
      var myLatLng = {lat: -25.363, lng: 131.044};  //ここは初期位置なので好きなように

      var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 4,            
        center: myLatLng
      });
      document.getElementById("map").style.display="none"; //この部分で地図は非表示に
    }
  </script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
  </script>

表示させたいページのコード

今回使ったページ名はmapcheckでしたので、触ったのはmapcheck.tsです。
また、今回変更したのはexport class MapCheckPage部分だけです。

export class MapcheckPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log("map_page init");
    let id=document.getElementById("map");
    if(id){
      id.style.display="block"; //表示させる部分です
    }else{
      console.log("id not found");
    }
  }
  ionViewDidLeave(){
    console.log("leave");
    let id =document.getElementById("map");
    if(id){
      id.style.display="none"; //非表示にする部分です
    }else{
      console.log("id not found");
    }
  }

}

ionicにはライフサイクルがありionViewDidLoad()はページが読み込まれたら、ionViewDidLeave()はページを離れたら動く関数なので、それぞれそこに表示、非表示の切り替え処理を書きました。