par

Comment faire pour intégrer Google Map à 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 Map, vous devez disposez d'une clé API Google Map.

L'option qui permet de changer la couleur des différents éléments de Google Map 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 Map :

<!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 Map via cette page du site de Google.

Tendances sur le Web

Lecture Recommandée

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

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

...