Google Mapを使ってみた

テックキャンプ では個人アプリを一人で作り上げなければいけません。
データベース設計からフロント、機能実装まで誰にも聞けず
孤独との戦いになります。
過去記事参照 → https://note.com/john01/n/n365c8bed71c7
公園情報サイトを作ろうと思ったので応用カリキュラムあたりから
GoogleMAPを使う方法を模索していました。
今回はAPIキーの取得から実装までの流れをまとめていきます。

Googleアカウントの作成

APIキーを使うためにはGoogleアカウントが必要なので
まずはアカウントを作成します。
https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&flowName=GlifWebSignIn&flowEntry=SignUp&nogm=true

GoogleMAP APIキーの作成

続いてAPIキーを取得していきます。
このAPIキーが何かというと

「Application Programming Interface」の略称
直訳すると「アプリケーションをプログラミングするインターフェース」
つまりAPIとはアプリケーションに別のプログラムを追加する為に存在し
あるアプリケーションの機能を第三者と共有する為の窓口になります。
その会社が使っている機能を使わせてもらう時に発行するものですかね。

まずはリンクからコンソールを開きプロジェクトを立ち上げます。
Google Cloud
https://cloud.google.com/
作業の流れはこちらのQiitaの記事がとても参考になりました。
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037
動画がいい！という方はドットインストール を参考にしてみてください。
無料で視聴できます。
https://dotinstall.com/lessons/basic_google_maps_v2

取得したコードの記載場所

HTMLのhead内もしくはbodyタグの最後に記載します。
以下は簡易的な表示方法になります。

--HTML--
<h1>Maps#index</h1>
<h2>gmap</h2>
<div id='gmap'></div>
<script src="https://maps.googleapis.com/maps/api/js?key={APIキー入力場所}=initMap" async defer></script>

<script>
   function initMap() {
     let mapPosition = {lat: 35.682979, lng: 139.749072};
     let mapArea = document.getElementById('gmap');
     let mapOptions = {
       center: mapPosition,
       zoom: 16,
     };
     let map = new google.maps.Map(mapArea, mapOptions);
     let markerOptions = {
       map: map,
       position: mapPosition,
     };
     let marker = new google.maps.Marker(markerOptions);
   }
 </script>

コード内のAPIキーという場所に取得したキーを入力します。
CSSで

＃gmap {
  width: 400px;
  height: 400px;
}

と設定してあげれば、表示できるはずです。

緯度、経度の取得方法

HTMLコードの『lat,lng』が緯度、経度になります。

GoogleMAPを開き、表示した場所で右クリック→この場所についてを選択するとこのような画面になります。

lat = 35.682979　緯度
lng = 139.743578　経度
コードもこの値に変更すると表示位置が変わると思います。

オススメの学習の流れ

まずは一時情報（公式サイト）からざっと眺めてみて
ドットインストール で初歩的な知識を得た後に
Qiitaなどの記事を読むのがオススメです。
僕は逆から学んでいったので丸１日かかってしまいました。
最後の最後にドットインストール の記事を見つけて
最初にここ読んでおけば良かったーと思いました。

ここまで読んでいただきありがとうございます。
学習の流れを間違えなければGoogleMAP導入は難しいことではありません
是非是非チャレンジしてみてください。