Android Styles Google Map personnalisés


Exemple

Style de carte

Google Maps est fourni avec un ensemble de styles différents à appliquer à l'aide de ce code:

// Sets the map type to be "hybrid"
map.setMapType(GoogleMap.MAP_TYPE_HYBRID);

Les différents styles de carte sont les suivants:

Ordinaire

map.setMapType(GoogleMap.MAP_TYPE_NORMAL);

Carte routière typique. Les routes, certaines caractéristiques créées par l'homme et d'importantes caractéristiques naturelles telles que les rivières sont représentées. Les étiquettes de route et de caractéristique sont également visibles.

entrer la description de l'image ici

Hybride

map.setMapType(GoogleMap.MAP_TYPE_HYBRID);

Données de photographie satellite avec cartes routières ajoutées. Les étiquettes de route et de caractéristique sont également visibles.

entrer la description de l'image ici

Satellite

map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);

Données de photographie par satellite. Les étiquettes de route et de caractéristique ne sont pas visibles.

entrer la description de l'image ici

Terrain

map.setMapType(GoogleMap.MAP_TYPE_TERRAIN);

Données topographiques. La carte comprend les couleurs, les lignes de contour et les étiquettes, ainsi que les ombres de perspective. Certaines routes et étiquettes sont également visibles.

entrer la description de l'image ici

Aucun

map.setMapType(GoogleMap.MAP_TYPE_NONE);

Pas de tuiles La carte sera rendue comme une grille vide sans tuiles chargées.

entrer la description de l'image ici


AUTRES OPTIONS DE STYLE

Cartes intérieures

À des niveaux de zoom élevés, la carte affichera les plans d’étage des espaces intérieurs. Celles-ci sont appelées cartes d'intérieur et ne sont affichées que pour les types de carte «normale» et «satellite».

pour activer ou désactiver les cartes intérieures, voici comment cela se passe:

GoogleMap.setIndoorEnabled(true).
GoogleMap.setIndoorEnabled(false).

Nous pouvons ajouter des styles personnalisés aux cartes.

Dans la méthode onMapReady, ajoutez l'extrait de code suivant

mMap = googleMap;
    try {
        // Customise the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = mMap.setMapStyle(
                MapStyleOptions.loadRawResourceStyle(
                        MapsActivity.this, R.raw.style_json));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
    } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style.", e);
    }

sous le dossier res , créez un nom de dossier brut et ajoutez le fichier styles json. Exemple de fichier style.json

    [
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#242f3e"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -80
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#263c3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6b9a76"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2b3544"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9ca5b3"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#1f2835"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f3d19c"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2f3948"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#17263c"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#515c6d"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -20
      }
    ]
  }
]

Pour générer des fichiers json styles, cliquez sur ce lien entrer la description de l'image ici