0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

これはメモのために書いたものである。
#GoogleMapでの処理
  XMLHttpRequestを非同期処理にさせたことで、Wordpressのページがリロードの度に、Google Map のピンが消えてしまうエラーが起きていた。まずは、全体的に現在地を取得するために、非同期関数を作成して、それをバックグランドで実行させていた。次に、マーカー(ピン)を挿すために、CSVファイルから情報を取得して、その情報をもとに作成した。
  markerwithlabelというライブラリを使っていた。このライブラリはかなり有能なので、共有しておく。
https://github.com/googlemaps/js-markerwithlabel
  Map開発やピンを加工したい人は使うとだいぶ作業が楽になる。

#エラー・問題点
  そもそも、最初に読み込めたのに、なぜ保存していたcsvの中身が消えるのかが謎だった。理由としては、キャッシュやクッキーがかかわっているかなと思って、それらを削除してもう一回実行しても同じだったので断念した。次に、実行する順番がおかしいと思って、csvを取得するコードを、非同期処理に入れた。これもうまく結果が出ず、やめることになった。
  ここから、同期と非同期ってなんだについて説明する。

##同期・非同期処理
  同期処理は、最初のコードから次のコードへと順次処理されていくこと。非同期処理は、ある処理が終了するのを待たずに、別の処理を開始すること。いわば、バックグランドで実行するかどうかが同期と非同期の違い(個人の見解)。
  だから、csvの取得は非同期処理でいいんだなって思った。それが最も違うことだろうな。非同期XMLHttpRequestを使用すると、データが到着したときにコールバックを受け取る。これにより、リクエストが処理されている間に、ブラウザは通常通り動く。逆に言えば、再度取得した場合(リロード)、コールバックが動かない。これにより、csvデータを取得した変数の中身は前の情報のままになる。これを同期処理させれば、エラーが起きなくなった。CSVを取得する処理が同期か非同期かは今回のエラーが起きた原因といえる。

エラー文:

Error
Uncaught (in promise) TypeError: Cannot read property '2' of undefined
//この2は二番目の情報を取得するものである。似ていいるようなエラーが起きた人は同期・非同期について詳しく調べてみるとよい。
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?