- ベストアンサー
Googlemap apiで複数のマーカーを表示する方法
- Googlemap api を使って複数のマーカーを表示させる方法について教えてください。
- 質問者は$getJSONを使用してマーカーを表示させようとしていますが、うまく表示されません。
- HTMLとJavaScriptのコードが提供されており、JSONファイルからマーカーの情報を取得して表示する処理が含まれています。
- k_kazu_426
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
回答 No.1の補足に対して回答します。 まず、コンソールに出力されているエラーは未定義の変数のnameプロパティにアクセスし、それが読み取れないことを意味しています。つまり、map.jsの該当行と照らし合わせるとjson[i].name（質問文のmap.js 14行目）においてjson[i]がundefinedとなる場合があるということです。 以上を踏まえて確認いただきたいのが、変数jsonに対するループ変数が適切かどうかということです。端的には、質問文のmap.js 11行目を質問文のmap.js 19行目で記述されているのと同様に for (var i = 0; i < json.length; i++) とすると解決しそうですがいかがでしょうか。 この部分は質問文では for (var i = 0; i <= json.length-1; i++) となっており、正常に動作しています。しかし、例えば for (var i = 0; i <= json.length; i++) のように、iがjsonの要素数以上となっている場合は前述のエラーが発生します。 各ループでjson[i]の値を確認するためにはfor文の内部で console.log(json[i]); と記述すると開発者ツールのコンソールに値が出力されるのでデバッグの参考にしてください。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
手元の環境で再現したところマーカーは３つとも表示されています。ブラウザの開発者ツールを開いて、コンソールにどのようなエラーが表示されているか確認してください。 現状では 1. JavaScriptやJSONファイル名の指定が誤っている 2. HTMLがブラウザ上でローカルファイルとして開かれているため、JSONファイルの取得がCORS制約によってブロックされている が原因として考えられます。 2. の場合はローカルにサーバー環境を構築し、ブラウザからlocalhostでHTMLを開くと解決します。PHPのビルトインサーバーやNode.jsのhttp-serverなどが手軽です。
補足
回答ありがとうございます。 Proof4さんの手元の環境では、マーカーが表示されたのですね。 自分のやり方としましては、XAMPPでローカル環境を構築してブラウザでlocalhostで開いてみたのですが、やっぱりマーカーは表示されていなかったです。 コンソールには以下の通り表示されていました。 Uncaught TypeError: Cannot read property 'name' of undefined at Object.success (map.js:16) at c (jquery-3.6.0.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2) at l (jquery-3.6.0.min.js:2) at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2) 何度も申し訳ありませんが、どこを修正したらいいのか分からないので教えていただきたいです。