はじめに
こんにちは。
とあるスクールで長めにメンターやってたもんです。
プログラミングってほんのちょっとの間違いでエラーになっちゃうから初心者の人は辛いですよね〜
今回は生徒さんのwebアプリ開発でようでる、Mapがでない・うまく表示されない問題がよくあるので、今後のメンターさんや生徒さんがちょっとでも楽になりますように。
※注意：エラーやうまいこといかんのを自分で解決する楽しさは奪いたくないのでほんまに無理な時に見てください。
開発環境でのエラー
1.そもそも地図が表示されるはず部分のスペースがない
これはhtml・cssでのミスがあると考えられます。
例えば、
2. cssの書き忘れ
3. id名あるいはclass名とセレクタ名が一致していない
これらが多いかと思います。
2.マップを表示するためのスペースはあるがマップは表示されず空白になっている。
こちらすごく多いです。なので原因もたくさんあります。
考えられる限りの原因を記していきますね。
- id名とgetElemmentByIdの名前が一致していない。
- .envファイルへの記述が間違っている。（そもそも.envファイルを使ってない人はデプロイする前に大事なものは.envファイルに転記しときましょう）
- geocoder. rbの記述が間違っている。とくにAPIを書く部分。
- scriptタグ内の記述ミス（ここはJSを書いたことのない人にはむずかしいかも）。
とくによく見るのは、カッコの閉じ忘れやmarkerやinfowindowの部分。 - データの受け渡しミス。（緯度、経度から住所を出す場合など）
3.マップはでているが、「このページではGoogleマップが正しく読み込まれませんでした。」というメッセージがでていてマップが正しく表示できない。
この場合の原因は基本的に一つです。
GCPでクレジットカードの登録ができていないことが原因のほとんどです。
なのでGCPにクレジットカードの登録をしましょう！
その際、APIの割り当てをお金がかからないところに設定しときましょう！そうすればお金をとられることはありません。