Comment afficher la couverture nuageuse actuelle sur une carte Google ?

Ce tutoriel est basé sur le code de l'exemple intitulé :

Comment créer notre première carte à l'aide de l'API Google Maps Version 3.

Nous allons compléter ce code afin d'ajouter la couverture nuageuse sur la carte Google.

Carte avec couverture nuageuse actuelle

Bibliothèque weather et classe CloudLayer pour afficher la couverture nuageuse.

La classe CloudLayer est disponible à condition de charger la bibliothèque weather lors de l'appel du script de l'API Google Maps V3 :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather"></script>

Ensuite, pour créer la couche nuageuse, que l'on nommera coucheNuages, il suffit d'utiliser la classe google.maps.weather.CloudLayer ainsi :

var coucheNuages = new google.maps.weather.CloudLayer();

Il ne reste plus qu'à préciser le nom de la carte sur laquelle cette couche nuageuse va venir s'afficher :

coucheNuages.setMap(maCarte);

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 4,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var coucheNuages = new google.maps.weather.CloudLayer();
				coucheNuages.setMap(maCarte);
			 }
			 google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Afficher la couverture nuageuse sur une carte Google Maps

Bibliothèque Weather - Prévisions météo et couche nuageuse exemples et tutoriels en Français

Cartographie et webmapping

Comment afficher la couverture nuageuse actuelle sur une carte Google ?

Carte avec couverture nuageuse actuelle

Bibliothèque weather et classe CloudLayer pour afficher la couverture nuageuse.