Google Maps Javascript APIで解説地図を作るまとめ

１．トラップメモ
①問題
②調査結果
③対応

1)google.maps API設定
(1)google.maps API登録
①google.maps APIを使いたい
②どうすれば？
③google cloudの有料登録が必要
・12 か月間 300 ドル分の無料トライアルを利用できるがカード登録は必須
・毎月 $200 分は無料
・用意するもの google ID,クレジットカード
・無料の範囲で使うには日当たりのmap load制限を設定しておく
　$200 = 28,000 load/month -> 900 load/day
　因みに今回のアプリ開発にかかったのは約300 load

(2)「アプリケーションの制限」
①「アプリケーションの制限」「HTTPリファラ（ウェブサイト）」のローカル登録
②ローカルから地図を表示できない
③ローカルの設定は下記による
・mac __file_url__//Users/*
・windows __file_url__//C:/Users/*
・javascriptに記述のkeyが正しければブラウザのコンソールに「URLを直してね」と親切なメッセージが出る
Your site URL to be authorized: __file_url__//Users/‥
・ローカルが含まれる場合同一のkeyに複数の登録はできない

2)google.maps API
(1) エラー google is not defined
①「google is not defined」エラーで止まる
②いろいろなケースがあるみたいですがもともとは

<script src="https://maps.googleapis.com/maps/api/js?key=API_key&amp;callback=initMap" async="" defer="defer"></script>

にフォーカスしていない
③API定義のコールバック関数 initMap で指定の関数内に入れると動く
　どこかで構文を間違えているので探して直す

(2)マップオプション設定
①マップオプションをリセットしたい
②setOptions にリセットは見当たらない
③setOptions でオプション設定は上書きされるので上手く使う

(3)マップオプション設定 featureType: "water"
①縮尺が小さいと河川（水系）が途切れ途切れになる
②仕様
③処置なし
　設定を変えてみたが治らない

(4)マーカー、オーバーレイの表示非表示
①マーカー、オーバーレイの表示非表示を切り替えたい
②どうすれば？
③非表示 .setMap(null)
表示作り直す
　　　関数にして呼び出せばいいのだけれど他に方法がありそう

(5)複数マーカーがある場合のマーカー特定
①配列変数でマーカーのコールバックを管理したい
②どうすれば？
③マーカーを定義してから配列に追加する
　マーカーとコールバック関数作成時に配列値を直接使用しないこと

//  配列の値を使ってマーカーとコールバック関数を作成する
//    この関数内ではマーカー設定に配列変数を使わない
//    引数に配列変数を渡してcallする

var marker_sisens = [];

function  create_Marker(name,lat,lng,map,flag) {

  //  マーカーを作る
  var marker = new google.maps.Marker({
    …
  });
  …
  //  出来たマーカーを配列に追加する
  marker_sisens.push(marker);

}