google map api マーカーの画像を値によって変える JavaScript gmap.js

Question

グーグマップ上で、任意の店舗の色を赤のマーカー画像、それ以外を青のマーカー画像というようにしたいです。

グーグマップを作成し、店舗のマーカーの設置はできました。

（店舗情報はAPIで取得）

試したこと

赤色にしたいSHOP_CODESを入れる
（index.htmlのheadに記載）

<script>
	var SHOP_CODES = [
		'1', 
		'2', 
		'3', 
		'4' 
	];
</script>

gmap.jsに上記の場合は赤のマーカー画像、それ以外は青のマーカー画像といif文を追加

function createMarkerImage(scale) {
  var mk = new google.maps.MarkerImage(
    //ここから追記
    if (SHOP_CODES= 1, 2, 3, 4){
    "/img/red.png",
    }else{
    "/img/blue.png",
    }
    //ここまでを追記
    new google.maps.Size(w * scale, h * scale),
    new google.maps.Point(0, 0),
    new google.maps.Point(w * scale * 0.5, h * scale),
    new google.maps.Size(w * scale, h * scale)
  );
  return mk;
}

もしかすると、if文を入れる場所が違っているかもしれません。

他に必要な情報がございましたらお教えください。

どうぞよろしくお願い申し上げます。

Comments

[Lhankor_Mhy]

これ、文法エラー出てませんか？

[ichigob]

ありがとうございます。
ローカルで試したところ、google mapのapiがうまく取得できていないせいか、この記述に関するエラーはありませんでした。
（googleのapiが取得できないエラーは、追記前からありました。ただいま調整中です）

[Lhankor_Mhy]

そうですか。
当方の環境では文法エラーになります。たいていのブラウザでは文法エラーを吐いて止まると思いますよ。

Answer 1

shop_codeにその店舗のコードが入っているとして、こんな感じではないでしょうか。

    SHOP_CODES.includes(shop_code) ? "/img/red.png" : "/img/blue.png",

IEでは動作しません。

コメントを受けて追記

SHOP_CODES.indexOf(shop_code) !== -1 ? "/img/red.png" : "/img/blue.png",

IEでも動くと思います。

Comments

[ichigob]

IEでも動作させたいです....(T . T)

```
if(SHOP_CODES === 1 || SHOP_CODES === 2 || SHOP_CODES === 3 ){
hoge
}else{
hoge2
}
```

はどうでしょうか？

[Lhankor_Mhy]

ダメだと思います。
「shop_codeにその店舗のコードが入っているとして」という前提は、そのままでいいですか？

[ichigob]

はい。店舗コードは取得した店舗のAPIにも入っている感じです。
そして、その店舗コードを選んで、色を変えたいと考えています。

[Lhankor_Mhy]

追記しました。

[ichigob]

ありがとうございます！
試してみます！！

[ichigob]

赤にする店舗の情報は、

<script>
var SHOP_CODES = [
'1',
'2',
'3',
'4'
];
</script>

から取得しているという認識であっておりますでしょうか。

[Lhankor_Mhy]

そうですね。

var SHOP_CODES = [
'1',
'2',
'3',
'4'
];
shop_code = '1';

だと赤くなる、みたいな話でよかったんですよね？

[ichigob]

はいそうです！

[ichigob]

Lhankor_Mhy さん
もし、値があるときだけ画像を出したい場合はどうなりますでしょうか？
SHOP_CODES.indexOf(shop_code) !== -1 ? "/img/red.png" : "/img/blue.png",

赤のみ表示という場合です。

アドバイスお願いいたします。

[Lhankor_Mhy]

if ( SHOP_CODES.indexOf(shop_code) !== -1 ) {
new google.maps.Marker({
...

のように if文で分岐させてマーカーを作成すればいいのでは？

そうではなくて、マーカーは作りたいけど画像は出したくない、という話なら、透明なPNGをマーカーにすればいいのでは。

[ichigob]

if で試してみます！

[ichigob]

１、SHOP_CODES がある場合は、その番号のみ赤で表示、それ以外は非表示。
２、SHOP_CODES がない場合、すべてのマーカーを表示

ーーーーーーーーー
if ( SHOP_CODES.indexOf(shop_code) !== -1 ) {
コードのマーカー画像のみ表示
}else{
マーカー画像全部表示
}
ーーーーーーーーー
この認識であっていますでしょうか？

[Lhankor_Mhy]

うーん。
私は、「値があるときだけ画像を出したい」とは「値があるときだけマーカーを出したい」という意味だと読みました。

なので、
ーーーーーーーーー
if ( SHOP_CODES.indexOf(shop_code) !== -1 ) {
マーカー表示
}
ーーーーーーーーー
でいいのでは？と申し上げた次第です。

そうではなくて、マーカー自体は表示したいけど、マーカー画像を表示したくない、という話であるならば、透明なPNGを用意すればいいのではないかな？と思ったのですが。
ichigobさんのお考えとは違いましたか？