How to change color of Google map in Android

Question

Here I'm trying to changing the color of google map into black from white but not getting a good solution. I tried it to change by using a relative layout over it but it hides that part , it doesn't change color of GoogleMap.

            <fragment xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/map"
                class="com.google.android.gms.maps.MapFragment"
                android:layout_width="match_parent"
                android:layout_height="100dp" />

You may want to check this [thread](http://stackoverflow.com/questions/8058787/custom-google-maps-styling-for-android). — gerardnimo, Dec 23 '15 at 10:20
Please don't add "Solved: " to question's titles. You can indicate that your problem was solved by accepting an answer. — double-beep, Jul 09 '21 at 05:03

score 5 · Answer 1 · edited Mar 11 '19 at 12:18

5

Go here: https://mapstyle.withgoogle.com/
Find your style and get json for your style value and copy.
Come to your android map project resource, click-new file, add json and paste style json value like style_map.json and your map activity's onMapReady(GoogleMap googleMap) do this:

mGoogleMap = googleMap;
MapStyleOptions mapStyleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json);
mGoogleMap.setMapStyle(mapStyleOptions);

It works for me :)

edited Mar 11 '19 at 12:18

סטנלי גרונן

2,917
23
46
68

answered Mar 11 '19 at 10:23

Ravi.Sh

187
2
6

how can i get R.raw.style_json – sushant singh Sep 27 '21 at 07:17

score 0 · Accepted Answer · answered Sep 24 '17 at 04:19

I got a solution of it by running a Html file of Google Map in WebView by putting that html file into assets folder. And I used following code to display

<!DOCTYPE html>
<html>
<head>
<title>Panoramio Layer</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
    }
    #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    }
    #photo-panel {
    background: #fff;
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px;
    max-height: 300px;
    font-size: 14px;
    font-family: Arial;
    border: 1px solid #ccc;
    box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);
    display: none;
    }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script>
<script>
function initializeGmaps() {
var LatLng = {lat: 28.596979, lng: 77.326742};
var mapCanvas = document.getElementById('google-map');
var mapOptions = {
center : LatLng,
scrollwheel : false,
zoom : 14,
mapTypeId : google.maps.MapTypeId.ROADMAP,
backgroundColor: 'none',
styles : [{
stylers: [
{ invert_lightness: true },
{ hue: '#666' },
{ saturation: -100 },
{ lightness: -0 },
{ visibility: 'simplified' }
]
}]
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
icon: '<?=base_url();?>images/marker.png',
title: 'Advisorymandi.com Pvt. Ltd.'
});
}
google.maps.event.addDomListener(window, 'load', initializeGmaps);

</script>
</head>
<body>
<ul id="photo-panel">
<li><strong>Photos clicked</strong></li>
</ul>
<div id="google-map" class="youplay-gmaps" style=" height: 450px; width: 100%;"></div>
</body>
</html>

score -1 · Answer 3 · edited Dec 22 '15 at 10:58

-1

For that you have to use google map v3 library. See documentation

edited Dec 22 '15 at 10:58

Marcin Orlowski

72,056
11
123
141

answered Dec 22 '15 at 10:54

AndroidLad

687
7
14

Why doesn't it have easy steps to implement it? – Anshul Tyagi Dec 22 '15 at 10:57
You are wrong! That is Android code, and you are talking about Javascript API, which is completely different thing. – Marius Kaunietis Dec 22 '15 at 11:01
Yes. It's not related to Android. – Anshul Tyagi Dec 22 '15 at 11:03
There is no api for android to customize mapview. You should javascript to customize map. – AndroidLad Dec 23 '15 at 07:58
That is the javascript api rather than the Android implementation. – toidiu Jan 11 '16 at 21:42

How to change color of Google map in Android

3 Answers3