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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

1282閲覧

javascriptのif文の書き方

t.togashi

総合スコア22

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」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

1クリップ

投稿2019/09/16 02:18

前提・実現したいこと

ruby on railsのアプリにおいて、Google Maps APIを使用し、マップと、マップ上にマーカー表示をしようとしています。
マーカーの色は、条件によって変わる仕様にしたいと考えています。

発生している問題・エラーメッセージ

以下のコード中のマーカーに関する記載を、当初

icon: "http://maps.google.com/mapfiles/ms/micons/red-dot.png"

としていたまでは、マップの表示ができていたのですが、マーカーの色を条件によって変えられるように、if文に書き換えたところ、マップが表示されなくなりました。

該当のソースコード

show.html.slim

#map javascript: var map; function initMap() { var target = document.getElementById('map'); // 表示したいポイント var point = {lat: #{@damage.latitude} , lng: #{@damage.longitude} }; map = new google.maps.Map(target, { center: point, zoom: 14 }); //マーカー var marker = new google.maps.Marker({ position: point, map: map, title: "#{@damage.title}", icon: if( #{@damage.id} == 6) { "http://maps.google.com/mapfiles/ms/micons/red-dot.png" } else { "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" } }); } script async="" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw&callback=initMap"

試したこと

上記の経過から、if文の記載部分に誤りがあると認識しました。
この中でも、#{@damage.id} == 6 に問題があるのかと推測し、rails consoleにて確認してみましたが、

irb(main):009:0> damage.id => 6 irb(main):010:0> damage.id.class => Integer

との結果であり、問題箇所の特定ができませんでした。

参考にした情報

Google Maps APIの使用に再しては、以下のサイトの情報を参考にさせて頂きました。
http://www.webdesignleaves.com/pr/plugins/googlemap_01.html

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavaScriptでは、ifであって、式の途中には書けません。

「事前にif文で変数を用意して、それを指定する」もしくは「その場で三項演算子で書く」のどちらかで対応することになります。

javascript

1// 事前に用意するパターン 2var iconUrl; 3if( #{@damage.id} == 6) { 4 iconUrl = "http://maps.google.com/mapfiles/ms/micons/red-dot.png" 5} else { 6 iconUrl = "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" 7} 8// 中略 9{ icon: iconUrl } 10 11// 三項演算子 12{ 13 icon: ( #{@damage.id} == 6) ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" 14}

投稿2019/09/16 02:23

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t.togashi

2019/09/16 02:30

早速ご教示くださりありがとうございました。 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問