# 【InFiNiTO Club】プログラミング講座7回目
## 初期準備
Teams上にアップロードした資料をデスクトップにダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
今日の授業で使うのは「06_js」というフォルダです。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。

geolocation_string.html
js/BmapQuery.js
js/jquery-2.1.3.min.js

今日の授業では06_jsフォルダ内の各htmlファイルを開いて作業していきます。

Bingmapsを書きやすくする為のライブラリ
https://mapapi.org/indexb.php

## セクション１　BingMapsのアカウント取得〜api keyを取得
### 1-1 こちらのURLにアクセスしてサインイン
https://www.bingmapsportal.com/

### 1-2 アカウント登録（資料P41~）

### 1-3 API key取得
画面上部：「My account」の中「My keys」をクリック
Create keyから新規アプリケーションを作成します。

アプリケーション名：自由な英字
アプリケーションURL:空欄でOK
Keytype:Basic
アプリケーションType:Dev/Test

### 1-4　以下のリンク方BingMapsの公式ドキュメントを開く
https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk

### 1-5 Getting Stratedのタブでベーシックな機能を知る

### 1-6 Servicesのタブの中のDirections Moduleを開く
Show input panelでは出発地点と到着地点からルート検索ができたりする。
ソースコードも記載されているのでこれを活用もできます。

## セクション2　実際にBingMapsAPIを使ってみよう
### 2-1 API keyを確認してコピー
Key detaisの部分のkeyに書かれているランダムな文字列があなた固有のAPIkeyです。
show keyで表示しましょう！
コピーしておきましょう。

### 2-2 geolocation_string.htmlの26行目の部分のコードを先程の自分のAPIkeyに書き換え
＊必ず自分のAPIkeyを書いてください。
`<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[xxxxx ここにapikeyを貼り付けます！少し動画の文字と違います🙋‍♀️]'`
↓↓↓↓
`<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=BgrtnN4MkiTRsu44yOqBfhu-wpEh-Xxnr4hGxREvtfjDhHebFKQb4ry9PcebkZ5y'`

### 2-3 まずはGetMap関数を作成する

//****************************************
//最初に実行する関数
//****************************************
function GetMap() {
  navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set);
}

### 2-4 位置情報の取得に成功したときの関数を作成する

//****************************************
//成功関数
//****************************************
let map;

function mapsInit(position) {

  //lat=緯度、lon=経度 を取得
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;

  //Map表示
  map = new Bmap("#myMap");
  map.startMap(lat, lon, "load", 25); //The place is Bellevue.

};

### 2-5 位置情報の取得に失敗した場合の関数を作成する

//****************************************
//失敗関数
//****************************************
function mapsError(error) {
  let e = "";
  if (error.code == 1) { //1＝位置情報取得が許可されてない（ブラウザの設定）
    e = "位置情報が許可されてません";
  }
  if (error.code == 2) { //2＝現在地を特定できない
    e = "現在位置を特定できません";
  }
  if (error.code == 3) { //3＝位置情報を取得する前にタイムアウトになった場合
    e = "位置情報を取得する前にタイムアウトになりました";
  }
  alert("エラー：" + e);
};

### 2-6 Map作成時のオプションを設定する

//****************************************
//オプション設定
//****************************************
const set = {
  enableHighAccuracy: true, //より高精度な位置を求める
  maximumAge: 20000, //最後の現在地情報取得が20秒以内であればその情報を再利用する設定
  timeout: 10000 //10秒以内に現在地情報を取得できなければ、処理を終了
};

### 2-7 Map上にPinを立ててみる

function mapsInit(position) {

  //lat=緯度、lon=経度 を取得
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;

  //Map表示
  map = new Bmap("#myMap");
  map.startMap(lat, lon, "load", 25); //The place is Bellevue.

  //Pinを追加<---ここを追加
  let pin = map.pin(lat, lon, "#ff0000");

};

### 2-8 立てたPinにInfoBoxをつけてみる

function mapsInit(position) {

  //lat=緯度、lon=経度 を取得
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;

  //Map表示
  map = new Bmap("#myMap");
  map.startMap(lat, lon, "load", 25); //The place is Bellevue.

  //Pinを追加
  let pin = map.pin(lat, lon, "#ff0000");

　　　//Infoboxを追加<---ここを追加
　　　map.infobox(lat, lon, "タイトル", "詳細情報を記載");

};

### 2-9 以下のページを参考にPinにクリックイベントを作ってみる
https://mapapi.org/example.php?file=pushpin_event&h=2

//Pinをクリックしたときのイベント
map.onPin(pin, "click", function(){
    alert("Pushpin-Event!!");
});

### 2-10 以下のページを参考にクリックした場所の位置情報を取得してinfoboxを立てる
https://mapapi.org/example.php?file=pushpin_event&h=2

map.onGeocode("click", function(data){
      console.log(data);                   //Get Geocode ObjectData
      const lat = data.location.latitude;  //Get latitude
      const lon = data.location.longitude; //Get longitude
      
    //Infoboxを追加
    map.infobox(lat, lon, "タイトル", "詳細情報を記載","Click");

  });

## 来週の授業の準備
MAMPのダウンロードとインストール
PHPの授業からはMAMPというアプリケーションを利用します。

以下のリンク先ページよりMAMPのwindows版3.3.1をダウンロードしてください。ページ下部にあります。
https://www.mamp.info/en/downloads/older-versions/
#### 1. ダウンロードが完了したらインストーラーを起動して下さい。
#### 2. MAMP PROとInstall Apple Bonjourのチェックを外す（不要なので）
#### 3. I accept the agreementを選択してNext
#### 4. 以降は指示に従ってNEXTを選択しインストールを完了させる。
#### 5. ダウンロードできたらインストールを完了させる。
#### 6. インストールした MAMP を開いて「Start Servers」を押し起動
＊「Apache Server」と「MySQL Server」の横に緑色のランプがついたら、サーバーの起動完了です。

参考記事
https://codeforfun.jp/how-to-install-mamp-windows-and-mac/#MAMPWindows
WindowsでMySQLが時の対処法
https://codeforfun.jp/mamp-mysql-not-starting-solutioin/