Customize color scheme of google maps V2 in android

Question

Currently I'm working with google maps v2 in my android application and i've faced a problem of colour scheme customization of maps. I saw it's possible in web with javascript here https://developers.google.com/maps/customize and http://jsfiddle.net/SQvej/ some example in js

var settingsItemsMap = {
zoom: 12,
center: new google.maps.LatLng(40.768516981, -73.96927308),
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE
},
styles:[
    { featureType: "water", stylers: [ { hue: "#F4B741"} ] },
    { featureType: "road", stylers: [ { hue: "#ff0000" } ] }
],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), settingsItemsMap );

but did not found solution for android maps, any suggestions?

Answer 1

create style from here

https://mapstyle.withgoogle.com/

then save that json under RAW folder , then call that style in your code like this

MapStyleOptions style = MapStyleOptions.loadRawResourceStyle(getActivity(), R.raw.my_map_style);
        googleMap.setMapStyle(style);

Answer 2

This is not possible in Android API v2. The only thing you can change is map type.

I can only suggest posting a feature request on gmaps-api-issues.

Edit: posted on gmaps-api-issues.

Answer 3

you can achieve this by using MapBox's API. Firstly, register an account, design the map the way you need it and then obtain the MapID and Access Token.

---

Next, copy this class

public class MapBoxOnlineTileProvider extends UrlTileProvider {

public final String TAG = this.getClass().getCanonicalName();
private static final String FORMAT;

static {
    FORMAT = "%s://api.tiles.mapbox.com/v4/%s/%d/%d/%d.png?access_token=%s";
}


private boolean mHttpsEnabled;
private String mMapIdentifier;
private String mAccessToken;


public MapBoxOnlineTileProvider(String mapIdentifier, String accessToken) {
    this(mapIdentifier, accessToken, false);
}

public MapBoxOnlineTileProvider(String mapIdentifier, String accessToken, boolean https) {
    super(256, 256);

    this.mHttpsEnabled = https;
    this.mMapIdentifier = mapIdentifier;
    this.mAccessToken = accessToken;
}


/**
 * The MapBox map identifier being used by this provider.
 *
 * @return the MapBox map identifier being used by this provider.
 */
public String getMapIdentifier() {
    return this.mMapIdentifier;
}

/**
 * Sets the identifier of the MapBox hosted map you wish to use.
 *
 * @param aMapIdentifier the identifier of the map.
 */
public void setMapIdentifier(String aMapIdentifier) {
    this.mMapIdentifier = aMapIdentifier;
}

/**
 * Whether this provider will use HTTPS when requesting tiles.
 *
 * @return {@link true} if HTTPS is enabled on this provider.
 */
public boolean isHttpsEnabled() {
    return this.mHttpsEnabled;
}

/**
 * Sets whether this provider should use HTTPS when requesting tiles.
 *
 * @param enabled
 */
public void setHttpsEnabled(boolean enabled) {
    this.mHttpsEnabled = enabled;
}

/**
 * The MapBox Acces Token found in Account Settings.
 */
public String getAccessToken() {
    return mAccessToken;
}

public void setAccessToken(String mAccessToken) {
    this.mAccessToken = mAccessToken;
}

@Override
public URL getTileUrl(int x, int y, int z) {
    try {
        String protocol = this.mHttpsEnabled ? "https" : "http";
        final String url = String.format(FORMAT,
                protocol, this.mMapIdentifier, z, x, y, this.mAccessToken);
        Log.d(TAG, url);
        return new URL(url);
    } catch (MalformedURLException e) {
        return null;
    }
} }

Now, in your Activity, once the map is ready:

String myMapID = "yourMapID";
String accesToken = "yourAccesToken";
MapBoxOnlineTileProvider provider = new   MapBoxOnlineTileProvider(myMapID, accesToken);
map.addTileOverlay(new TileOverlayOptions()
                .tileProvider(provider));

Result:

Answer 4

If the requirement is only to dim or change overall color of the map then you can use an tile overlay. This will create the partially transparent layer (in this case green) on a map. It resides right above the tiles, so marks and other objects are not affected.

@Override
public void onMapReady(GoogleMap googleMap) {
    TileProvider coordTileProvider = new CoordTileProvider(getActivity());
    map.addTileOverlay(new TileOverlayOptions().tileProvider(coordTileProvider));       
}

The class CoordTileProvider is:

public static class CoordTileProvider implements TileProvider {

    private static final int TILE_SIZE_DP = 256;

    private final float mScaleFactor;

    private final Bitmap mBorderTile;

    public CoordTileProvider(Context context) {
        /* Scale factor based on density, with a 0.2 multiplier to increase tile generation
         * speed */
        mScaleFactor = context.getResources().getDisplayMetrics().density * 0.2f;
        Paint paint = new Paint();
        paint.setColor(Color.argb(150,200,255,200));
        mBorderTile = Bitmap.createBitmap((int) (TILE_SIZE_DP * mScaleFactor),
                (int) (TILE_SIZE_DP * mScaleFactor), android.graphics.Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mBorderTile);
        canvas.drawRect(0, 0, TILE_SIZE_DP * mScaleFactor, TILE_SIZE_DP * mScaleFactor,
                paint);
    }

    @Override
    public Tile getTile(int x, int y, int zoom) {
        Bitmap coordTile = drawTileCoords(x, y, zoom);
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        coordTile.compress(Bitmap.CompressFormat.PNG, 0, stream);
        byte[] bitmapData = stream.toByteArray();
        return new Tile((int) (TILE_SIZE_DP * mScaleFactor),
                (int) (TILE_SIZE_DP * mScaleFactor), bitmapData);
    }

    private Bitmap drawTileCoords(int x, int y, int zoom) {
        Bitmap copy = null;
        synchronized (mBorderTile) {
            copy = mBorderTile.copy(android.graphics.Bitmap.Config.ARGB_8888, true);
        }
        return copy;
    }
}

Answer 5

You can change only map style.

this link tells you, how to set style on map.

And this link tells you how to create style for google map.