質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

解決済

javascriptの繰り返し処理

t.togashi
t.togashi

総合スコア0

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

1回答

0評価

0クリップ

33閲覧

投稿2019/09/17 12:41

前提・実現したいこと

ruby on railsのアプリにおいて、Google Maps APIを使用し、マップと、マップ上に複数のマーカー表示しています。
マップ上のマーカーをクリックすると、それぞれのマーカーに該当するshow.html.slimページにリンクする仕様にしたいと考えています。

発生している問題

問題箇所

// マーカーのクリックイベント marker.addListener('click', function(){ console.log(damages); console.log(damages[i]); });

リンクする仕様を実装する前段階で、クリックイベント内の挙動を確認しながら進めているのですが、
console.log(damages);の出力は、意図したarray(その中にハッシュ)であるものの、
console.log(damages[i]);の出力は、undefinedとなります。
すなわち、この部分の繰り返し処理がうまくできていないと認識しているのですが、この書き方でなぜ上手くいかないのかがわかりませんでした。
どのように改善すべきかご教示頂けますと幸いです。

該当のソースコード

index.html.slim

.page-title 被害一覧 = link_to '被害の新規登録', new_damage_path, class: 'btn btn-primary' table.table.table-hover.index-table thead.thead-light tr th = Damage.human_attribute_name(:title) th = Damage.human_attribute_name(:place) th = Damage.human_attribute_name(:amount) th = User.human_attribute_name(:department) th = User.human_attribute_name(:name) th tbody - @damages.each do |damage| tr td = link_to damage.title, damage_path(damage), class: 'damage-title' td = damage.place td = damage.amount&.to_s(:delimited) td = damage.user.department td = damage.user.name - if damage.user_id == current_user.id td = link_to '編集', edit_damage_path(damage), class: 'btn btn-primary' - else td = tr td = "合計" td = "#{@total_place}箇所" td = @total_amount.to_s(:delimited) td = td = td = #map.mb-5 javascript: // APIライブラリの読み込みが終わったら実行する関数を指定 function initMap() { // javascriptうちでは - @damages.each do |damage| という方法は使用不可のため、JSONに変換 var damages = #{raw @damages.to_json}; // idがmapのdiv要素オブジェクトを取得 var target = document.getElementById('map'); // 中央に表示する座標 var center = {lat: 38.698953,lng: 139.925736} // マップを描画 map = new google.maps.Map( // 描画する領域のオブジェクトを指定 target, { // 描画に関するオプション center: center, zoom: 13 }); var marker, i; for (i = 0; i < damages.length; i++) { // マーカーを表示 marker = new google.maps.Marker({ // 表示オプション position: new google.maps.LatLng(damages[i].latitude, damages[i].longitude), map: map, title: damages[i].title, icon: ( damages[i].description.indexOf('現地確認未了') == -1 ) ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" }); // マーカーのクリックイベント marker.addListener('click', function(){ console.log(damages); console.log(damages[i]); }); } } script async="" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw&callback=initMap"

参考にした情報

http://www.webdesignleaves.com/pr/plugins/googlemap_01.html

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。