Modifier le type de carte par défaut avec la propriété MapTypeId

Carte Map exemples et tutoriels en Français

API Google Maps JavaScript version 3

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Comment modifier le type de carte google maps affiché par défaut ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer une carte avec l'API Google Maps Version 3 ?.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Nous allons compléter ce code afin de modifier le type de carte s'affichant par défaut sur notre carte Google Maps.

Carte avec le type de carte par défaut défini sur RELIEF

Par défaut, la carte ci-dessus s'affichera avec le type de carte RELIEF : google.maps.MapTypeId.TERRAIN.
En tout il existe 4 types de carte : HYBRID (Satellite avec légendes), ROADMAP (Plan), SATELLITE (Satellite), TERRAIN (Relief)

Propriété MapTypeId

La propriété MapTypeId de l'objet MapOptions permet de modifier le type de carte affiché sur une carte Google Maps.

La propriété MapTypeId peut prendre 4 valeurs :

Afficher une carte SATELLITE AVEC LEGENDES par défaut - google.maps.MapTypeId.HYBRID

Pour afficher, par défaut, une carte de type satellite avec légendes, il suffit d'attribuer à la propriété mapTypeId la constante google.maps.MapTypeId.HYBRID dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		mapTypeId: google.maps.MapTypeId.HYBRID
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

  • utilisation de la méthode setMapTypeId de la classe Map
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setCenter( { lat: 47.389982, lng: 0.688877 } );
    		maCarte.setZoom(8);
    		maCarte.setMapTypeId(google.maps.MapTypeId.HYBRID);
    }
    
  • utilisation de la méthode setOptions de la classe Map
    function initialisation(){
    	var optionsCarte = {
    		zoom: 8,
    		center: { lat: 47.389982, lng: 0.688877 },
    		mapTypeId: google.maps.MapTypeId.HYBRID
    	}
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setOptions( optionsCarte );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
    		maCarte.set( "zoom", 8 );
    		maCarte.set( "mapTypeId", google.maps.MapTypeId.HYBRID );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setValues( {
    			center : { lat: 47.389982, lng: 0.688877 },
    			zoom: 8,
    			MapTypeId: google.maps.MapTypeId.HYBRID
    		} );
    }
    

Afficher une carte PLAN par défaut - google.maps.MapTypeId.ROADMAP

Pour afficher, par défaut, une carte de type plan, il suffit d'attribuer à la propriété mapTypeId la constante google.maps.MapTypeId.ROADMAP dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

  • utilisation de la méthode setMapTypeId de la classe Map
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setCenter( { lat: 47.389982, lng: 0.688877 } );
    		maCarte.setZoom(8);
    		maCarte.setMapTypeId(google.maps.MapTypeId.ROADMAP);
    }
    
  • utilisation de la méthode setOptions de la classe Map
    function initialisation(){
    	var optionsCarte = {
    		zoom: 8,
    		center: { lat: 47.389982, lng: 0.688877 },
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setOptions( optionsCarte );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
    		maCarte.set( "zoom", 8 );
    		maCarte.set( "mapTypeId", google.maps.MapTypeId.ROADMAP );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setValues( {
    			center : { lat: 47.389982, lng: 0.688877 },
    			zoom: 8,
    			MapTypeId: google.maps.MapTypeId.ROADMAP
    		} );
    }
    

Afficher une carte SATELITTE par défaut - google.maps.MapTypeId.SATELLITE

Pour afficher, par défaut, une carte de type satellite, il suffit d'attribuer à la propriété mapTypeId la constante google.maps.MapTypeId.SATELLITE dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		mapTypeId: google.maps.MapTypeId.SATELLITE
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

  • utilisation de la méthode setMapTypeId de la classe Map
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setCenter( { lat: 47.389982, lng: 0.688877 } );
    		maCarte.setZoom(8);
    		maCarte.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    }
    
  • utilisation de la méthode setOptions de la classe Map
    function initialisation(){
    	var optionsCarte = {
    		zoom: 8,
    		center: { lat: 47.389982, lng: 0.688877 },
    		mapTypeId: google.maps.MapTypeId.SATELLITE
    	}
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setOptions( optionsCarte );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
    		maCarte.set( "zoom", 8 );
    		maCarte.set( "mapTypeId", google.maps.MapTypeId.SATELLITE );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setValues( {
    			center : { lat: 47.389982, lng: 0.688877 },
    			zoom: 8,
    			MapTypeId: google.maps.MapTypeId.SATELLITE
    		} );
    }
    

Afficher une carte RELIEF par défaut - google.maps.MapTypeId.TERRAIN

Pour afficher, par défaut, une carte de type relief, il suffit d'attribuer à la propriété mapTypeId la constante google.maps.MapTypeId.TERRAIN dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		mapTypeId: google.maps.MapTypeId.TERRAIN
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

  • utilisation de la méthode setMapTypeId de la classe Map
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setCenter( { lat: 47.389982, lng: 0.688877 } );
    		maCarte.setZoom(8);
    		maCarte.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    }
    
  • utilisation de la méthode setOptions de la classe Map
    function initialisation(){
    	var optionsCarte = {
    		zoom: 8,
    		center: { lat: 47.389982, lng: 0.688877 },
    		mapTypeId: google.maps.MapTypeId.TERRAIN
    	}
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setOptions( optionsCarte );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
    		maCarte.set( "zoom", 8 );
    		maCarte.set( "mapTypeId", google.maps.MapTypeId.TERRAIN );
    }
    
  • La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues
    function initialisation(){
    	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
    		maCarte.setValues( {
    			center : { lat: 47.389982, lng: 0.688877 },
    			zoom: 8,
    			MapTypeId: google.maps.MapTypeId.TERRAIN
    		} );
    }
    

Comportement par défaut la propriété MapTypeId

Par défaut, le type de carte affiché est PLAN : google.maps.MapTypeId.ROADMAP.

Par conséquent, définir la propriété mapTypeId sur google.maps.MapTypeId.ROADMAP dans optionsCarte :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

ou omettre la propriété mapTypeId dans optionsCarte, affichera systématiquement une carte dont le type de carte par défaut sera PLAN :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Exemple de code avec la propriété mapTypeId

Dans l'exemple de code ci-dessous le type de carte par défaut est RELIEF : mapTypeId: google.maps.MapTypeId.TERRAIN.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 8,
					center: { lat: 47.389982, lng: 0.688877 },
					mapTypeId: google.maps.MapTypeId.TERRAIN
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>