javascriptのif文の書き方

前提・実現したいこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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}