Comment créer une carte avec Leafleft ou l'API Google Maps

Carte Map exemples et tutoriels en Français

API Google Maps JavaScript version 3

Dans ce tutoriel nous allons construire et insérer une carte dans une page web à l'aide de Leaflet ou de l'API Google Maps. Cette carte sera centrée sur la ville de Tours ( Latitude : 47.389982, Longitude : 0.688877 ) avec un niveau de zoom égal à 13.

Si L'API Google Maps nécessite obligatoirement une clé API Google, pour Leaflet aucune clé API n'est demandée, mais un jeton d'accès peut être nécessaire pour télécharger les tuiles à afficher sur la carte.

Chaque exemple contient le code minimal indispensable à la construction et à l'affichage d'une carte à l'aide de Leaflet ou de l'API Google Maps Javascript.

Remarque :
Lorque l'on crée une carte, que ce soit avec Leaflet ou avec l'API Google Maps, il est impératif de paramétrer au minimum :
  • le container dans lequel la carte sera affichée en lui attribuant un nom ( <div id="EmplacementDeMaCarte"></div> ),
  • les coordonnées GPS (latitude et longitude) de son centre,
  • son niveau de zoom.

Carte Leaflet

Créer une carte avec Leaflet

Leaflet est une bibliothèque JavaScript Open Source de cartographie. En plus d'être totalement gratuite, elle fonctionne parfaitement sur poste fixe, tablette et mobile. Elle est également facile à utiliser, son API est bien documentée, son code source est disponible ici et elle dispose de nombreux plugins !

Avant de coder une carte à l'aide de Leaflet, vous devez insérer dans la section head de votre page :

  • Le fichier CSS :
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
       crossorigin=""/>
    
  • Le fichier JavaScript
    <!-- Assurez-vous d'appeler le fichier JavaScript Leaflet après l'appel du fichier CSS Leaflet -->
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
       integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
       crossorigin=""></script>
    
  • Les propriétés CSS de la carte (au minimum sa hauteur) :
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0
    }
    #EmplacementCarteLeaflet {
    	height: 100%
    }
    

Puis dans la section body insérez :

  • une balise div qui contiendra la carte Leaflet :
    <div id="EmplacementCarteLeaflet"></div>
    
  • le code JavaScript destiné à créer votre carte Leaflet :
    var carteLeaflet = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);
    
    /**
     * On peut également écrire :
     */
    
    var carteLeaflet = L.map('EmplacementCarteLeaflet', {
        center: [47.389982, 0.688877],
        zoom: 13
    });
    
    Dans le code ci-dessus on créé une carte nommée carteLeaflet qui sera affichée dans une balise div ayant pour identifiant EmplacementCarteLeaflet. La carte Leaflet sera centrée sur un point ayant pour Latitude : 47.389982 et Longitude : 0.688877 avec un niveau de zoom égal à 13.

    Notez que la méthode setView de la classe Map retourne l'objet map permettant ainsi le chainage (la méthode retourne l'élément sur lequel elle a été appliquée).
  • Enfin, il ne reste plus qu'à télécharger et afficher les tuiles sur notre carte à l'aide de la méthode tileLayer :
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
    
    • {s} : signifie l'un des sous-domaines disponibles (utilisé séquentiellement pour aider les requêtes parallèles du navigateur par limitation de domaine; les valeurs de sous-domaine sont spécifiées dans options; a, b ou c par défaut, peuvent être omises),
    • {z} : niveau de zoom,
    • {x} et {y} : coordonnées de la tuile,
    • {r} : peut être utilisé pour ajouter "@ 2x " à l'URL pour charger les tuiles Retina.
    • Vous pouvez utiliser des clés personnalisées dans le modèle, qui seront évalués à partir des options TileLayer, comme ceci :
      L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});
      
      Les tuiles servant à afficher la carte peuvent être téléchargées auprès de différents fournisseurs. En voici une liste non exhaustive, dont vous trouverez des exemples complets ci-après :

Carte Leaflet avec tuiles Mapbox

Dans cet exemple on utilise les tuiles Mapbox. Pour pouvoir accéder à ces tuiles il faut obtenir un jeton d'accès ( ou token access) délivré après inscription sur le site mapbox.

var carteLeafletMapbox = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=CollerVotreJetonDaccessIci', {
	maxZoom: 18,
	attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
		'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
		'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	id: 'mapbox.streets'
}).addTo(carteLeafletMapbox);

Exemple de code pour créer et afficher une carte Leaflet avec des tuiles Mapbox :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>TouraineVerte.fr coder une carte avec Leaflet et Mapbox</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementCarteLeaflet {
				height: 100%
			}
		</style>
	</head>

	<body>
		<div id="EmplacementCarteLeaflet"></div>
		<script>
			var carteLeafletMapbox = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);
			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=CollerVotreJetonDaccessIci', {
				maxZoom: 18,
				attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
					'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
					'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				id: 'mapbox.streets'
			}).addTo(carteLeafletMapbox);
		</script>
	</body>
</html>

Carte Leaflet avec tuiles OSM

Vous pouvez également utiliser les tuiles proposées par OpenStreetMap. Dans ce cas, aucun jeton d'accès n'est nécessaire. Le code devient :

var carteLeafletOSM=L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);;
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
	}).addTo(carteLeafletOSM);

Exemple de code pour créer et afficher une carte Leaflet avec des tuiles OSM :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>TouraineVerte.fr coder une carte avec Leaflet et OSM</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementCarteLeaflet {
				height: 100%
			}
		</style>
	</head>

	<body>
		<div id="EmplacementCarteLeaflet"></div>
		<script>
			var carteLeafletOSM = L.map('EmplacementCarteLeaflet', {
			    center: [47.389982, 0.688877],
			    zoom: 13
			});
			L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
					'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
			}).addTo(carteLeafletOSM);
		</script>
	</body>
</html>

Carte Leaflet avec tuiles ESRI

Dans cet exemple on utilise les tuiles proposées par ESRI. Aucun jeton d'accès n'est nécessaire. Par contre, il ne faut pas oublier de charger un script supplémentaire :

<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
    integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
    crossorigin=""></script>
puis modifier le code ainsi :
var carteLeafletESRI = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);
L.esri.basemapLayer('Streets').addTo(carteLeafletESRI);

Exemple de code pour créer et afficher une carte Leaflet avec des tuiles ESRI :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>TouraineVerte.fr coder une carte avec Leaflet et ESRI</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
	    <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
	    integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
	    crossorigin=""></script>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementCarteLeaflet {
				height: 100%
			}
		</style>
	</head>

	<body>
		<div id="EmplacementCarteLeaflet"></div>
		<script>
			var carteLeafletESRI = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);
			L.esri.basemapLayer('Streets').addTo(carteLeafletESRI);
		</script>
	</body>
</html>

Carte Leaflet avec tuiles Géoportail carte IGN

Dans cet exemple on utilise les tuiles proposées par Géoportail. Dans le cadre du mouvement ChosirGeoportail, L'IGN vous propose une nouvelle clé de service web librement accessible, nommée "choisirgeoportail", pour vos tests et développements sans créer de compte sur le site Espace Professionnel. Le code devient ainsi :

var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);

L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
	attribution: 'Geoportail France',
	bounds: [[-75, -180], [81, 180]],
	minZoom: 2,
	maxZoom: 19,
	apikey: 'choisirgeoportail',
	format: 'image/jpeg',
	style: 'normal'
});.addTo(carteLeafletGeoportail);

Une autre écriture possible du code, plus lisible à mon goût :

var tuilesGeoportailOrthophotos = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?' +
	'REQUEST=GetTile' +
	'&SERVICE=WMTS' +
	'&VERSION=1.0.0' +
	'&STYLE={style}' +
	'&TILEMATRIXSET=PM' +
	'&FORMAT={format}' +
	'&LAYER={ignLayer}' +
	'&TILEMATRIX={z}' +
	'&TILEROW={y}' +
	'&TILECOL={x}', {
		attribution: 'Geoportail France',
		bounds: [[-75, -180], [81, 180]],
		minZoom: 2,
		maxZoom: 19,
		apikey: 'choisirgeoportail',
		ignLayer: 'ORTHOIMAGERY.ORTHOPHOTOS',
		format: 'image/jpeg',
		style: 'normal'
});

var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet"), {
	center: [47.389982, 0.688877],
	zoom: 13,
	layers: [tuilesGeoportailOrthophotos]
});

Exemple de code pour créer et afficher une carte Leaflet avec des tuiles orthophotographiques Géoportail LAYER=ORTHOIMAGERY.ORTHOPHOTOS :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>TouraineVerte.fr coder une carte avec Leaflet et Geoportail</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementCarteLeaflet {
				height: 100%
			}
		</style>
	</head>

	<body>
		<div id="EmplacementCarteLeaflet"></div>
		<script>
			var tuilesGeoportailOrthophotos = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?' +
				'REQUEST=GetTile' +
				'&SERVICE=WMTS' +
				'&VERSION=1.0.0' +
				'&STYLE={style}' +
				'&TILEMATRIXSET=PM' +
				'&FORMAT={format}' +
				'&LAYER={ignLayer}' +
				'&TILEMATRIX={z}' +
				'&TILEROW={y}' +
				'&TILECOL={x}', {
					attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
					bounds: [[-75, -180], [81, 180]],
					minZoom: 2,
					maxZoom: 19,
					apikey: 'choisirgeoportail',
					ignLayer: 'ORTHOIMAGERY.ORTHOPHOTOS',
					format: 'image/jpeg',
					style: 'normal'
			});

			var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet"), {
				center: [47.389982, 0.688877],
				zoom: 13,
				layers: [tuilesGeoportailOrthophotos]
			});
		</script>
	</body>
</html>

Géoportail vous propose également un tuilage pour les parcelles cadastrales - LAYER=CADASTRALPARCELS.PARCELS :

var tuilesGeoportailCadastre = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?' +
	'REQUEST=GetTile' + 
	'&SERVICE=WMTS' + 
	'&VERSION=1.0.0' + 
	'&STYLE={style}' + 
	'&TILEMATRIXSET=PM' + 
	'&FORMAT={format}' +
	'&LAYER={ignLayer}' +
	'&TILEMATRIX={z}' + 
	'&TILEROW={y}' +
	'&TILECOL={x}', {
		attribution: 'Geoportail France',
		bounds: [[-75, -180], [81, 180]],
		minZoom: 2,
		maxZoom: 20,
		apikey: 'choisirgeoportail',
		ignLayer: 'CADASTRALPARCELS.PARCELS',
		format: 'image/png',
		style: 'bdparcellaire'
	});

var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet"), {
	center: [47.389982, 0.688877],
	zoom: 13,
	layers: [tuilesGeoportailCadastre]
});

les cartes SCAN Express Standard - LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD :

var tuilesGeoportailScanExpressStandart = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?' +
	'REQUEST=GetTile' +
	'&SERVICE=WMTS' +
	'&VERSION=1.0.0&' +
	'STYLE={style}' +
	'&TILEMATRIXSET=PM' +
	'&FORMAT={format}' +
	'&LAYER={ignLayer}' +
	'&TILEMATRIX={z}' +
	'&TILEROW={y}' +
	'&TILECOL={x}', {
		attribution: 'Geoportail France',
		bounds: [[-75, -180], [81, 180]],
		minZoom: 2,
		maxZoom: 18,
		apikey: 'choisirgeoportail',
		ignLayer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD',
		format: 'image/jpeg',
		style: 'normal'
});

var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet"), {
	center: [47.389982, 0.688877],
	zoom: 13,
	layers: [tuilesGeoportailScanExpressStandart]
});

les cartes IGN - GEOGRAPHICALGRIDSYSTEMS.MAPS :

var tuilesGeoportailIgn = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?' +
	'REQUEST=GetTile' +
	'&SERVICE=WMTS' +
	'&VERSION=1.0.0' +
	'&STYLE={style}' +
	'&TILEMATRIXSET=PM' +
	'&FORMAT={format}' +
	'&LAYER={ignLayer}' + 
	'&TILEMATRIX={z}' +
	'&TILEROW={y}' +
	'&TILECOL={x}', {
		attribution: 'Geoportail France',
		bounds: [[-75, -180], [81, 180]],
		minZoom: 2,
		maxZoom: 19,
		apikey: 'choisirgeoportail',
		ignLayer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
		format: 'image/jpeg',
		style: 'normal'
});

var carteLeafletGeoportail = L.map("EmplacementCarteLeaflet"), {
	center: [47.389982, 0.688877],
	zoom: 13,
	layers: [tuilesGeoportailIgn]
});

Si vous souhaitez connaître l'ensemble des services d’images tuilées (WMTS) du Géoportail et découvrir comment les utiliser, je vous invite à lire les articles intitulés Ressources WMTS et Utilisation du service OGC WMTS sur le site de l'IGN.

Les différentes façon de coder un objet latLng avec Leaflet

Toutes les méthodes de Leaflet qui acceptent des objets LatLng les acceptent également sous la forme d'un :

  • tableau : [47.389982, 0.688877]
  • objet littéral :
    • {lat:47.389982, lng:0.688877}
    • {lon:0.688877, lat:47.389982}
  • objet latLng : L.latLng(47.389982, 0.688877)

/**
 * Ainsi la ligne de code suivante :
 */

var carteLeaflet = L.map("EmplacementCarteLeaflet").setView([47.389982, 0.688877], 13);


/**
 * pourrait également s'écrire ainsi :
 */

 var carteLeaflet = L.map("EmplacementCarteLeaflet").setView({lat:47.389982, lng:0.688877}, 13);


/**
 * ou :
 */

 var carteLeaflet = L.map("EmplacementCarteLeaflet").setView({lon:0.688877, lat:47.389982}, 13);


/**
 * ou enfin :
 */
 
 var carteLeaflet = L.map("EmplacementCarteLeaflet").setView(L.latLng(47.389982, 0.688877), 13);

Carte Google Maps

Créer une carte codée avec l'API Google Maps Javascript

Avant de coder une carte à l'aide de l'API Google Maps, vous devez insérer dans la section head de votre page :

  • Les propriétés CSS de la carte (au minimum sa hauteur) :
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0
    }
    #EmplacementCarteGoogle {
    	height: 100%
    }
    

Puis dans la section body insérez :

  • une balise div qui contiendra la carte Google Maps
    <div id="EmplacementCarteGoogle"></div>
    
  • suivi du code JavaScript destiné à afficher votre carte Google Maps :
    
    function initialisation(){
    	var optionsCarteGoogle = {
    		zoom: 13,
    		center: {lat: 47.389982, lng: 0.688877}
    	}
    	var carteGoogle = new google.maps.Map(document.getElementById("EmplacementCarteGoogle"), optionsCarteGoogle);
    }
    
  • et enfin l'appel du script de l'API Google Maps ( de préférence placé juste avant la balise </body> ) :
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=CollerVotreCleApiGoogleIci&callback=initialisation"></script>
    

Carte Google Maps

Les différentes façon de coder un objet latLng avec l'API Google Maps

Toutes les méthodes de l'API Google Maps qui acceptent des objets LatLng les acceptent également sous forme de :

  • objet latLng : new google.maps.LatLng(47.389982, 0.688877)
  • objet littéral : {lat:47.389982, lng:0.688877}

Attention :
dans l'API Google Maps l'écriture sous forme d'un tableau de latitude longitude [47.389982, 0.688877] n'est pas aceptée !

Exemple de code avec l'API Google Maps pour créer et afficher une carte

En positionnant notre code javascript et l'appel du script de l'API Google Maps juste avant la balise </body>, on profite pleinement des avantages des attributs async et defer de la balise <script>. Le paramètre callback, placé dans l'URL du script appelant l'API GOOGLE MAPS, désigne la fonction a exécuter, ici initialisation(), une fois le script de l'API GOOGLE MAPS chargé et exécuté :

<!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
			}
			#EmplacementCarteGoogle {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id="EmplacementCarteGoogle"></div>
		<script>
			function initialisation(){
				var optionsCarteGoogle = {
					zoom: 13,
					center: {lat: 47.389982, lng: 0.688877}
				}
				var carteGoogle = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarteGoogle);
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=VotreCléApiGoogleMaps&callback=initialisation"></script>
	</body>
</html>

Autres écritures possibles

De nombreuses autres écritures du code sont possibles pour le même résultat :

<script>
function initialisation(){
	var optionsCarte = {
		zoom: 13,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}
</script>
<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), { new google.maps.LatLng(47.389982, 0.688877), zoom: 13));
}
</script>

Utilisation de la méthode setOptions de la classe Map :

<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setOptions({
		zoom: 13,
		center: new google.maps.LatLng( 47.389982, 0.688877 )
	});
}
</script>
<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setOptions({
		zoom: 13,
		center: {lat: 47.389982, lng: 0.688877}
	});
}
</script>
<script>
function initialisation(){
	var optionsCarte = {
		zoom: 13,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setOptions(optionsCarte);
}</script>
<script>
function initialisation(){
	var optionsCarte = {
		zoom: 13,
		center: {lat: 47.389982, lng: 0.688877}
	};
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setOptions(optionsCarte);
}
</script>
	

Utilisation des méthodes setCenter et setZoom de la classe Map :

<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setCenter( new google.maps.LatLng(47.389982, 0.688877) );
	maCarte.setZoom( 13 );
}
</script>
<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setCenter( {lat: 47.389982, lng: 0.688877} );
	maCarte.setZoom( 13 );
}
</script>

Utilisation de la méthode set de la classe MVCObject (la classe Map héritant de la classe MVCObject) :

<script>
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", 13);
}
</script>

/**
* Remarque : Il est IMPOSSIBLE de remplacer :
* maCarte.set("center", new google.maps.LatLng( 47.389982, 0.688877 ));
* par :
* maCarte.set("center", {lat: 47.389982, lng: 0.688877} );
*/

Utilisation de la méthode setValues de la classe MVCObject (la classe Map héritant de la classe MVCObject) :

<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setValues({
		"center": new google.maps.LatLng( 47.389982, 0.688877 ),
		"zoom": 13
	});
}
</script>
<script>
function initialisation(){
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setValues({
		"center": {lat: 47.389982, lng: 0.688877},
		"zoom": 13
	});
}
</script>
<script>
function initialisation(){
	var optionsCarte = {
		zoom: 13,
		center: {lat: 47.389982, lng: 0.688877}
	};
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
	maCarte.setValues( optionsCarte );
}
</script>