Is it possible to change the color of the marker marker in Google Maps?

Question

I am using the Google Maps API (JS) marker without problems in my application. The code below works perfectly:

var mapa = new google.maps.Map(document.getElementById("mapa"), {
    center: {lat: latitude, lng: longitude}, zoom: 10
    });
var infowindow = new google.maps.InfoWindow({
    content: endereco, size: new google.maps.Size(200, 200)
});
var marcador = new google.maps.Marker({ position: {lat: latitude, lng: longitude}, map: mapa}); 
google.maps.event.addListener(marcador, 'click', function() { 
    infowindow.open(mapa, marcador);
});

I would like to change the color of this marker, and perhaps even provide options for the user to customize it. Just so we’re clear, I’m referring to the red "little balloon" we put in the addresses:

Does the API allow marker color change? How? I looked here in the community and only found questions about the customization of the marker replacing it for some image, but what I want is simpler, just change the same color. Thank you.

Answer 1

Associate data to a marker

It is possible to store an arbitrary data object with a marker using Marker.setTag() and recover the data object using Marker.getTag(), as shown in this example code.

/**
 * A demo class that stores and retrieves data objects with each marker.
 */
public class MarkerDemoActivity extends FragmentActivity implements
        OnMarkerClickListener,
        OnMapReadyCallback {

    private static final LatLng PERTH = new LatLng(-31.952854, 115.857342);
    private static final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
    private static final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);

    private Marker mPerth;
    private Marker mSydney;
    private Marker mBrisbane;

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.marker_demo);

        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /** Chamado quando o mapa está pronto. */
    @Override
    public void onMapReady(GoogleMap map) {
        mMap = map;

        // Add some markers to the map, and add a data object to each marker.
        mPerth = mMap.addMarker(new MarkerOptions()
                .position(PERTH)
                .title("Perth");
        mPerth.setTag(0);

        mSydney = mMap.addMarker(new MarkerOptions()
                .position(SYDNEY)
                .title("Sydney");
        mSydney.setTag(0);

        mBrisbane = mMap.addMarker(new MarkerOptions()
                .position(BRISBANE)
                .title("Brisbane");
        mBrisbane.setTag(0);

        // Set a listener for marker click.
        mMap.setOnMarkerClickListener(this);
    }

    /** Chamado quando o usuário clica em um marcador. */
    @Override
    public boolean onMarkerClick(final Marker marker) {

        // Retrieve the data from the marker.
        Integer clickCount = (Integer) marker.getTag();

        // Check if a click count was set, then display the click count.
        if (clickCount != null) {
            clickCount = clickCount + 1;
            marker.setTag(clickCount);
            Toast.makeText(this,
                           marker.getTitle() +
                           " has been clicked " + clickCount + " times.",
                           Toast.LENGTH_SHORT).show();
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false;
    }
}

Here are some examples of scenarios when it is useful to store and recover data with bookmarks:

Your app can offer various types of bookmarks and you want to treat them differently when the user clicks on them. To do this, it is possible to store a String with the marker indicating the type. You may be interfacing with a system that has unique registry identifiers, where markers represent specific records in this system. Marker data may indicate a priority to be used when deciding the Z index of a marker.

Customize the color of the marker

You can customize the default marker image color by passing a Bitmapdescriptor object to the icon() method. You can use a set of preset colors in the Bitmapdescriptorfactory object or set a custom marker color with the Bitmapdescriptorfactory.defaultMarker(float Hue) method. The hue is a value between 0 and 360, representing points in a color palette.

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));

FOLLOWS OTHER DATA IN THIS LINK: https://developers.google.com/maps/documentation/android-api/marker?hl=pt-br