地図のマーカーの変更

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
google map apiを使った地図アプリで、表示するお店の種類によってマーカーの色を変えたい。
どのようなコードを書けば変えられるかが分からない。

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

MerkerDataのgenreで識別して、そのジャンルごとに地図上に表示するマーカーの色を変更したいです。例えば、groceryであれば赤色のマーカー、飲食店であれば緑色のマーカー、銭湯であれば黄色のマーカーというふうに区別して表示したいです。どのようなコードを書けばこの機能が実装できるでしょうか。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <title>地図アプリ</title>
  </head>

  <body>
    <div class="container" id="main-body">
      <h2 class="title">地図アプリ</h2>
      <div class="content">
        <p>マーカーの色によってジャンルを分けています。</p>
        <li>赤：食品</li>
        <li>黄：銭湯・温泉</li>
        <li>緑：飲食店</li>
      </div>

    </div>
    <div id="map"></div>

    <script async defer src="http://maps.google.com/maps/api/js?key={Mygooglemapapikey}&callback=initMap"></script>

       <script>
        var map;
        var marker = [];
        var infoWindow = [];
        var markerData = [
          {
            name: 'スーパーA',
            lat:00,
            lng: 00,
            genre: 'grocery',
          }, {
            name:'スーパーB',
            lat:00,
            lng:00,
            genre: 'grocery',
          }, {
            name: '銭湯A',
            lat: 00, 
            lng:00,
            genre: 'hotspring',
          }, {
            name: '銭湯B',
            lat:00, 
            lng:00,
            genre:'hotspring',
          }, {
            name: '飲食店A',
            lat: 00,
            lng: 00,
            genre: 'restaurant'
          }
        ];
        var latlng = new google.maps.LatLng(00, 00)
        function initMap() {
 // 地図の作成
    var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
   map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む
     center: mapLatLng, // 地図の中心を指定
      zoom: 15, // 地図のズームを指定
   });
  
 // マーカー毎の処理
 for (var i = 0; i < markerData.length; i++) {
        markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
        marker[i] = new google.maps.Marker({ // マーカーの追加
         position: markerLatLng, // マーカーを立てる位置を指定
            map: map, // マーカーを立てる地図を指定
       });

     infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
         content: '<div class="map">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
       });
  
     markerEvent(i); // マーカーにクリックイベントを追加
 }
}
  
// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
      infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}
</script>

<footer class="footer">
  <p>地図アプリ</p>
</footer>

  </body>
</html>

試したこと

if文を使って試行錯誤してみましたが、マーカーが表示されませんでした。初心者なので何をすればいいか分からなくなってしまいました。

補足情報（FW/ツールのバージョンなど）

apiキーや実際の座標軸は伏せさせていただきましたが、同じ色ならマーカーを地図上に表示させ、クリックするとコメントが表示される状態までは上のコードでできています。その上でマーカーの色をジャンルごとに変える機能をつけたいです。

meg_

2021/03/01 03:02

> 同じ色ならマーカーを地図上に表示させ色の指定をしているコードはどの部分になりますか？

Lhankor_Mhy

2021/03/01 03:10

「if文を使って試行錯誤してみました」とのことですが、ご提示のコードにはif文が見当たりませんでした。

Michiba333

2021/03/01 03:12

for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map, // マーカーを立てる地図を指定 }); の部分です。現在はマーカーのiconのタグを使っていないので、google mapのデフォルトのマーカーの色を使っています。試していた時は、iconタグを使って指定しようとしていました。

meg_

2021/03/01 03:22

色の指定自体が実装できていない、ということですね？

Michiba333

2021/03/01 05:28

そうですね、iconタグで指定しても色がデフォルトのままで使いたい黄色や青にならないです。

Michiba333

2021/03/01 05:33

そうですね、genreごとに色が分かれず、どのgenreに対してもデフォルトの色ままになってしまいます。

meg_

2021/03/01 05:37

> そうですね、iconタグで指定しても色がデフォルトのままで使いたい黄色や青にならないです。そのコードを載せてください。

Michiba333

2021/03/01 08:03

for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map, // マーカーを立てる地図を指定 }); if ('genre'=='grocery') { marker[i] = new google.maps.Marker({ icon: { url:'https://maps.google.com/mapfiles/ms/micons/red-dot.png', scaledSize: new google.maps.Size(30, 30), } }) } else { marker[i] = new google.maps.Marker({ icon: { url:'https://maps.google.com/mapfiles/ms/micons/yellow-dot.png', scaledSize: new google.maps.Size(30, 30), } }) } restaurantについては書いていないですが、上のような感じです。

meg_

2021/03/01 12:50

情報は質問に追記いただいた方が回答が付きやすくなるかと思います。（質問は編集出来ます）上記コードのurlはアクセス出来ませんがそれは問題ないでしょうか？