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

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

ただいまの
回答率

87.35%

javascriptのif文の書き方

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 835

score 22

前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

// 事前に用意するパターン
var iconUrl;
if( #{@damage.id} == 6) {
  iconUrl = "http://maps.google.com/mapfiles/ms/micons/red-dot.png"
} else {
  iconUrl = "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
}
// 中略
{ icon: iconUrl }

// 三項演算子
{
  icon: ( #{@damage.id} == 6) ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/16 11:30

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

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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