【図解】Ionic Google Mapを表示するまでの全ての手順

#はじめに
基本的には普通にブラウザに表示させるのと、手順は同じ。

色々と調べたが、~~IonicでネイティブのGoogle Mapは使えない？（かもしれない）~~
→ @ionic-native/google-maps + cordova-plugin-googlemaps
これで使えるようです！

Google Cloud Platform Consoleはよく画面の見た目（UI）が変わるので、画像とボタンの配置が違ったりする事はご了承を。。。

#環境
Ionic5 + Angular9 + capacitor

#FirebaseまたはGoogle Cloud Platformでプロジェクトを作成
公式ページである[Get an API Key](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja)ではGoogle Cloud Platformへのリンクが貼られてるが、Firebaseで作ってもどっちでもいい。

今回はFirebaseでプロジェクトを作成したとする。

<img width="485" alt="スクリーンショット 2020-05-19 22.15.04.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/53439e28-6ab1-e027-e678-cd24126ea3c5.jpeg">


#APIキーを用意
Firebaseでプロジェクトを作った場合、すでに「Browser key (auto created by Firebase)」の名前でAPIキーが存在する。
<img width="243" alt="スクリーンショット 2020-05-19 22.16.44.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/9fa4e1d7-b5be-0e5b-8ac0-5ffec9e1ab45.jpeg">

**しかし、これとは別に新たに作成しよう。**

##Maps JavaScript APIを有効にする
[Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard?hl=ja)へ行く。

<img width="549" alt="スクリーンショット 2020-05-19 22.30.50.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/54954fed-7aea-4d7b-2703-15f7ce5f0f9a.jpeg">


Firebaseで作成したプロジェクトを、上のタブから選ぶ



<img width="459" alt="スクリーンショット 2020-05-19 22.28.02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/8722f82a-42bf-66bc-4091-ae86b7b1fc83.jpeg">

`APIとサービス＞ライブラリ`へ移動

<img width="1027" alt="スクリーンショット 2020-05-19 22.24.39.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/98534fdf-2766-d2d3-94eb-17aabcbd2015.jpeg">

Maps JavaScript APIを選択

<img width="499" alt="スクリーンショット 2020-05-19 22.07.32.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/abc94145-ebd7-b772-e268-74eaa62edcb6.jpeg">

有効にする

##認証情報を作成

<img width="460" alt="スクリーンショット 2020-05-19 22.33.38.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/6d8453cd-6355-27fb-0522-26fbcaa86d27.jpeg">

`APIとサービス＞認証情報`へ移動

<img width="690" alt="スクリーンショット 2020-05-19 22.21.55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/730e01e2-1c25-00d4-8cd0-1b1100fbd453.jpeg">

上にある「＋認証情報を作成」ボタンを押し、**APIキーを選択**

<img width="555" alt="スクリーンショット 2020-05-19 22.37.34.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/c2ed0668-6ef2-039f-1bac-880445422583.jpeg">

APIキーをコピーしておく

<img width="502" alt="スクリーンショット 2020-05-19 22.36.02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/e72f13fe-75df-f2c3-b611-3cc516f385fe.jpeg">

APIの制限で、Maps JavaScript APIを選択し保存

#Ionicプロジェクト内のindex.htmlにAPIキーが入ったコードを追加
公式ページ[Get an API Key](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja)の中にあるscriptタグをコピー

<img width="719" alt="スクリーンショット 2020-05-19 22.42.55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/a523537f-2655-66f4-ebce-b06f179c786a.jpeg">

Ionicプロジェクト内のindex.html（結構上の階層にあるよ！）を開き、`head`の閉じタグの直前にscriptタグを追加

`callback=initMap`の部分は特にいらないので削除！

```html:index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="color-scheme" content="light dark" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_APIkey">
  </script>
</head>

<body>
  <app-root></app-root>
</body>

</html>
```

#Mapを追加


```html:home.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      マップを見るよー
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div #map id="map"></div>

</ion-content>
```

```typescript:home.page.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {

// Map関係
  @ViewChild('map', { static: true }) mapElement: ElementRef;
  map: any;
  markers = [];

constructor() { }

ngOnInit() {
    console.log('ngOnInitです');
  }

  ionViewWillEnter() {
    this.loadMap();
  }

// Initialize a blank map
  loadMap() {
    let latLng = new google.maps.LatLng(51.9036442, 7.6673267);
    let mapOptions = {
      center: latLng,
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

}
```

```css:home.page.scss
#map {
  width: 100%;
  height: 70%;
}
```

##ブラウザで確認

`ionic serve`を実行！

<img width="375" alt="スクリーンショット 2020-05-19 22.58.20.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/8479c909-727b-b341-cce2-a217270cbcd6.jpeg">

#最後に
[こちら](https://devdactic.com/ionic-firebase-location-capacitor/)を参考にやりましたが、APIキーの部分でつまずいたので、、、:unamused:
Google MapのAPIキー取得はやったことあるのに、完全に忘れてしまった。。。