Javascript 如何在谷歌地图上显示多个彩色PIN码

我目前正在谷歌地图上成功地显示标记，但我想用不同的颜色覆盖一组不同的标记，但我有点被困在如何做

我正在从数据库将数据放入

$markers

数组，如下所示：

while($row = $result->fetch_row()) 
    {
    $rows[]=$row;
    $markers[$key] = trim($row[12]).','.trim($row[13]).','.trim($row[10]).','.trim($row[9]).','.trim($row[8]).','.trim($row[4]).','.trim($row[6]).','.trim($row[3]); 
    $key = $key +1;
    }

其中，

$row[“”]

是来自数据库的数据，包括标记位置的lat和lon

神奇就发生在这里：

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=<?=$api_key?>">
    </script>
    <script type="text/javascript">
        var map;
        var marker = {};
        function initialize() {
            var mapOptions = {
            center: { lat: 20.1788823, lng: 13.8262155},
            zoom: 2
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        var markers = [];
        <?php 
            $counter = 0;
            foreach ($markers as $index => $list){
                   $marker_details = explode(',',$list);
                   echo 'markers["m'.($index-1).'"] = {};'."\n";
                   echo "markers['m".($index-1)."'].lat     = '".$marker_details[0]."';\n";
                   echo "markers['m".($index-1)."'].lon     = '".$marker_details[1]."';\n";
                   $counter++;
           }
        ?>
        var totalMarkers = <?=$counter?>;
        var i = 0;
        var infowindow;
        var contentString;
        for (var i = 0; i<totalMarkers; i++){
            
            contentString = '<div class="content">'+
                  '<h2 class="firstHeading">'+markers['m'+i].name+'</h2>'+
                  '<div class="bodyContent">'+
                  '<p>'+markers['m'+i].content+'</p>'+
                  '</div>'+
                  '</div>';
            
            
            infowindow = new google.maps.InfoWindow({
                  content: contentString
            });

            marker['c'+i] = new google.maps.Marker({
                    position: new google.maps.LatLng(markers['m'+i].lat,markers['m'+i].lon),

                    icon:   { 
                            url: "https://maps.google.com/mapfiles/ms/icons/red.png"
                            },
                            
                    map: map,
                    title: markers['m'+i].name,
                    infowindow: infowindow
              });
            //console.log(markers['m'+i].lat+','+markers['m'+i].lon);
            google.maps.event.addListener(marker['c'+i], 'click', function() {
                    for (var key in marker){
                        marker[key].infowindow.close();
                    }
                    this.infowindow.open(map, this);
                    
            });
        }

      }
      function panMap(la,lo){
            map.panTo(new google.maps.LatLng(la,lo));
            
      }
      function openMarker(mName){
          //console.log(marker);
          for (var key in marker){
              marker[key].infowindow.close();
          }
          for (var key in marker){
              
            if (marker[key].title.search(mName) != -1){
                marker[key].infowindow.open(map,marker[key]);
            }
          }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

---

好的，我发现了问题，问题是我每次都在创建另一个“新”映射，需要删除以下的其他实例：

map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

现在，带有新数据的附加标记将正确显示

感谢所有的反对票，它真的把注意力集中在自己找到解决方案上
 一个包含PHP和我们没有看到/拥有的数据的JS脚本不是一个脚本。请阅读该链接并提供一个可复制的示例
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);