Лично я считаю, что значки, созданные с помощью Google Charts API, выглядят великолепно и их легко динамически настраивать.

См. Мой ответ на Google Maps API 3 - Пользовательский цвет маркера для маркера по умолчанию (точка)

Самый простой способ, который я нашел, - использовать BitmapDescriptorFactory.defaultMarker () в документации даже есть пример настройки цвета. Из моего собственного кода:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

Чтобы настроить маркеры, вы можете сделать это с помощью этого онлайн-инструмента: https://materialdesignicons.com/

В вашем случае вам нужен маркер карты, который доступен здесь: https://materialdesignicons.com/icon/map-marker, которые можно настроить в Интернете.

Если вы просто хотите изменить красный цвет по умолчанию на синий, вы можете загрузить этот значок: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Об этом упоминалось в этой теме: https://stackoverflow.com/a/32651327/6381715

Эта относительно недавняя статья предоставляет простой пример с ограниченным набором цветных значков Google Maps.

Реальный пример веб-сайта с использованием синих и оранжевых маркеров карты см. на этом веб-сайте и просмотрите сценарий под Google карта.

<section id="map" class="map">   

    <script>
        let map;
        const speediwash = { lat: 52.656937, lng: -8.634390 };
        const stJosephX = { lat: 52.658041, lng: -8.632414};
        // const maryI = { lat: 52.653192, lng: -8.638974 };
        const trainStn = { lat: 52.658757, lng: -8.623560 };
        // const claytonH = { lat: 52.660802, lng: -8.636411 };
                     
        let markersArray = [];          // Global array to store the marker object

        function initMap() 
        {
          map = new google.maps.Map(document.getElementById('map'), 
            {
              center: stJosephX,
              zoom: 15.1
            });
          addMarker(speediwash, "Speediwash", "blue");
          //addMarker(maryI, "Mary I College", "green");
          addMarker(trainStn, "Train Station", "orange");
          //addMarker(claytonH, "Clayton Hotel", "purple");
        }

        function addMarker(latLng, alabel, color) 
        {
          let url = "https://maps.google.com/mapfiles/ms/icons/";
                        url += color + "-dot.png";
                      
          let marker = new google.maps.Marker(
                        {
                            map: map,
                            position: latLng,
                            label: alabel,
                            icon:   
                            {
                                url: url,       
                                labelOrigin: new google.maps.Point(60, 30)
                            }
                        });
                    }
    </script>

    <script async defer
                    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&callback=initMap">
    </script>