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

Question

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

Navigation

#1 by (1 votes)

2

I'm using the Google Maps API (JS) marker with no 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'd like to change the color of this bookmark, and maybe even provide options for the user to customize it. Just to make it clear, I mean the red "balloon" that we put in the addresses:

Does the API allow marker color change? As? I searched here in the community and only found questions about customizing the bookmark by swapping it for some image, but what I want is simpler, just change the color myself. Thank you.

google-maps

asked by anonymous 04.11.2016 / 21:24

1 answer

Create trigger for sequence in primary key Error adding APP compilation to iTunes Connect

score 1 · Answer 1

Link data to a bookmark

You can store an arbitrary data object with a label using Marker.setTag() and retrieve the data object using Marker.getTag() , as shown in this sample 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 sample scenarios when it is useful to store and retrieve bulleted data:

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

Customize bookmark color

You can customize the color of the marker's default image by passing a BitmapDescriptor object to the icon () method. You can use a predefined color set in the BitmapDescriptorFactory object or set a custom bullet color with the BitmapDescriptorFactory.defaultMarker (float hue) method. The tint 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)));

FOLLOW OTHER DATA ON THIS LINK: link