これはメモのために書いたものである。
#GoogleMapでの処理
XMLHttpRequestを非同期処理にさせたことで、Wordpressのページがリロードの度に、Google Map のピンが消えてしまうエラーが起きていた。まずは、全体的に現在地を取得するために、非同期関数を作成して、それをバックグランドで実行させていた。次に、マーカー(ピン)を挿すために、CSVファイルから情報を取得して、その情報をもとに作成した。
markerwithlabelというライブラリを使っていた。このライブラリはかなり有能なので、共有しておく。
https://github.com/googlemaps/js-markerwithlabel
Map開発やピンを加工したい人は使うとだいぶ作業が楽になる。
#エラー・問題点
そもそも、最初に読み込めたのに、なぜ保存していたcsvの中身が消えるのかが謎だった。理由としては、キャッシュやクッキーがかかわっているかなと思って、それらを削除してもう一回実行しても同じだったので断念した。次に、実行する順番がおかしいと思って、csvを取得するコードを、非同期処理に入れた。これもうまく結果が出ず、やめることになった。
ここから、同期と非同期ってなんだについて説明する。
##同期・非同期処理
同期処理は、最初のコードから次のコードへと順次処理されていくこと。非同期処理は、ある処理が終了するのを待たずに、別の処理を開始すること。いわば、バックグランドで実行するかどうかが同期と非同期の違い(個人の見解)。
だから、csvの取得は非同期処理でいいんだなって思った。それが最も違うことだろうな。非同期XMLHttpRequestを使用すると、データが到着したときにコールバックを受け取る。これにより、リクエストが処理されている間に、ブラウザは通常通り動く。逆に言えば、再度取得した場合(リロード)、コールバックが動かない。これにより、csvデータを取得した変数の中身は前の情報のままになる。これを同期処理させれば、エラーが起きなくなった。CSVを取得する処理が同期か非同期かは今回のエラーが起きた原因といえる。
エラー文:
Uncaught (in promise) TypeError: Cannot read property '2' of undefined
//この2は二番目の情報を取得するものである。似ていいるようなエラーが起きた人は同期・非同期について詳しく調べてみるとよい。