par

Comment faire pour intégrer Google Maps à son site Web, et changer les couleurs de la carte ?

1 Réponse

+1 validé
par

Prérequis : Pour changer les couleurs d'une carte Google Maps, vous devez disposez d'une clé API Google Maps.

L'option qui permet de changer la couleur des différents éléments de Google Maps est un objet du type JSON que vous devez ajouter à votre code JavaScript.

Une déclaration de style JSON se compose des éléments suivants :

  • featureType (facultatif) - Les caractéristiques sont des caractéristiques géographiques sur la carte, y compris les routes, les parcs, les plans d'eau, etc. Si vous ne spécifiez pas de fonction, toutes les fonctions sont sélectionnées par défaut.
  • elementType (facultatif) - Les éléments sont des sous-parties d'une entité, y compris les étiquettes et la géométrie. Si vous ne spécifiez pas d'élément, tous les éléments de l'entité sont sélectionnés par défaut.
  • stylers - Les stylers indiquent la couleur, la visibilité et le poids de la fonction. Vous pouvez appliquer un ou plusieurs stylers à une fonction.

Pour spécifier un style et modifier les couleurs des différents composants de la carte : routes, océans, terres, etc ; vous devez combiner un ensemble de sélecteurs featureType, elementType et stylers dans un tableau de styles. Le nombre de styles que vous pouvez appliquer simultanément est limité. Si votre tableau de styles dépasse le nombre maximal de caractères, aucun style n'est appliqué.

Voici un exemple concret pour changer les couleurs d'une carte Google Maps :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Google Map</title>
		<style>
		#map {
		height: 800px;   
		width: 100%;
		}
		</style>
	</head>
	<body>
		<div id="map"></div> 
		<script>
		var map;
		function initMap() {
		map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 0, lng: 0},
		zoom: 3.0,
		styles: [
		{
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#212121"
		}
		]
		},
		{
		"elementType": "labels.icon",
		"stylers": [
		{
		"visibility": "off"
		}
		]
		},
		{
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#757575"
		}
		]
		},
		{
		"elementType": "labels.text.stroke",
		"stylers": [
		{
		"color": "#212121"
		}
		]
		},
		{
		"featureType": "administrative",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#757575"
		}
		]
		},
		{
		"featureType": "administrative.country",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#9e9e9e"
		}
		]
		},
		{
		"featureType": "administrative.land_parcel",
		"stylers": [
		{
		"visibility": "off"
		}
		]
		},
		{
		"featureType": "administrative.locality",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#bdbdbd"
		}
		]
		},
		{
		"featureType": "poi",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#757575"
		}
		]
		},
		{
		"featureType": "poi.park",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#181818"
		}
		]
		},
		{
		"featureType": "poi.park",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#616161"
		}
		]
		},
		{
		"featureType": "poi.park",
		"elementType": "labels.text.stroke",
		"stylers": [
		{
		"color": "#1b1b1b"
		}
		]
		},
		{
		"featureType": "road",
		"elementType": "geometry.fill",
		"stylers": [
		{
		"color": "#2c2c2c"
		}
		]
		},
		{
		"featureType": "road",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#8a8a8a"
		}
		]
		},
		{
		"featureType": "road.arterial",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#373737"
		}
		]
		},
		{
		"featureType": "road.highway",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#3c3c3c"
		}
		]
		},
		{
		"featureType": "road.highway.controlled_access",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#4e4e4e"
		}
		]
		},
		{
		"featureType": "road.local",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#616161"
		}
		]
		},
		{
		"featureType": "transit",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#757575"
		}
		]
		},
		{
		"featureType": "water",
		"elementType": "geometry",
		"stylers": [
		{
		"color": "#000000"
		}
		]
		},
		{
		"featureType": "water",
		"elementType": "labels.text.fill",
		"stylers": [
		{
		"color": "#3d3d3d"
		}
		]
		}
		]
		});
		}
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE_API_ICI&callback=initMap" async defer></script>
	</body>
</html>

Vous trouverez d'avantage d'informations sur la manière de changer les couleurs d'une carte Google Maps via cette page du site de Google.

Lectures Recommandées

Régis Chaperon - Welcome Reset

"Lorsqu'un virus informatique d'une nouvelle génération infecte en quelques heures les systèmes de distribution électriques, le monde entier se retrouve plongé dans le noir. Les banques, les distributeurs de billets, le chauffage, tout s'arrête."

Mais si même une intelligence artificielle américaine est incapable de vaincre le virus, est-ce qu'un homme qui a fui la modernité saura découvrir la faiblesse de ce virus informatique inconnu ?

Welcome Reset est un roman bien rythmé, efficace et réaliste.

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...