Créer une animation pour rétrécir un cercle sur une carte Google Maps
Ce tutoriel est basé sur le code de l'exemple intitulé : Dessiner un cercle sur une carte Google Maps.
Nous allons maintenant adapter ce code afin de :
- créer et afficher un cercle,
- puis diminuer son rayon de 50 mètres toutes les 30 millisecondes,
- pour finalement le supprimer de la carte lorsque son rayon est inférieur ou égal à 0 mètre.
Carte Google Maps avec un cercle dont le rayon diminue créant une animation
Le rayon de ce cercle va diminuer de 50 mètres toutes les 30 millisecondes. Lorsque le rayon sera inférieur ou égal à zéro, le cercle sera supprimé de la carte.
Fonction pour diminuer le rayon du cercle sur une carte Google Maps
Nous allons créer une fonction nommée retrecirCercle() qui va nous permettre de diminuer le rayon d'un cercle, de façon dynamique, sur une carte créée à l'aide de l'API Google Maps JavaScript Version3.
Cette fonction attend un paramètre :
objetCercle: objet cercle (Circle) que l'on souhaite rétrécir,
A l'intérieur de la fonction retrecirCercle() :
- trois variables sont définies :
- rayon : le rayon initial du cercle (en mètres),
- diminue : distance soustraite au rayon du cercle (en mètres),
- delai : delai d'attente entre deux variations du rayon du cercle (en millisecondes).
- et insertion de la fonction
decremente().
Dans notre exemple, les 3 variables sont définies afin que le rayon initial soit le rayon du cercle, puis pour qu'il diminue de 50 mètres toutes les 30 millisecondes jusqu'à atteindre une valeur inférieure ou égale à zéro.
La fonction decremente() est directement chargée de diminuer le rayon du cercle, tant qu'il est supérieur ou égal à zéro. Lorsque la valeur du rayon sera inférieure à zéro, le cercle sera supprimé de la carte.
Pour modifier la valeur du rayon de l'objet monCercle il suffit d'utiliser la méthode setRadius() :
monCercle.setRadius( rayon );
Cette ligne de code est insérée dans la fonction nommée decremente(). Cette fonction est appelée par setTimeout() toutes les 30 millisecondes afin de diminuer le rayon du cercle de 50 mètres tant que celui-ci est supérieur ou égal à zéro. Lorsque la valeur du rayon est inférieure à zéro, le cercle est purement et simplement supprimé de la carte.
function retrecirCercle(objetCercle){ varrayon=objetCercle.getRadius(); var diminue = 50; var delai = 30; functiondecremente(){objetCercle.setRadius(rayon); if( 0 <=rayon) {rayon=rayon-diminue; setTimeout(decremente(), delai ); } else {objetCercle.setMap( null ); } }; setTimeout(decremente(), delai ); }
Cliquer sur un bouton pour animer et rétrécir un cercle sur une carte Google Maps
Enfin, on ajoute un observateur d'événement sur un élément du DOM à l'aide de la méthode statique google.maps.event.addDomListener().
Cet élément est la balise :
<div id="boutonRetrecir">Rétrécir Cercle</div>
Tout click sur le bouton "Rétrécir Cercle" appelle la fonction retrecirCercle en lui passant en paramètres :
- l'objet cercle que l'on souhaite rétrécir : monCercle
/** * Javascript */ google.maps.event.addDomListener( document.getElementById("boutonRetrecir"), "click", function(){ retrecirCercle( monCercle ) }); /** * Dans le BODY */ <div id="boutonRetrecir">Rétrécir Cercle</div>
Selon les caractéristiques de votre ordinateur et/ou navigateur la fluidité de l'animation peut être très variable.
Code animant un cercle par diminution de son rayon sur une carte Google Maps
Grâce au code de ce tutoriel vous avez appris à créer un cercle disparaissant de façon dynamique sur une carte Google Maps.
Son rayon diminue de 50 mètres toutes les 30 millisecondes jusqu'à sa disparition totale.
<!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:0px; padding:0px}
#EmplacementDeMaCarte{height:80%}
.btn{
display:inline-block;
width: 180px;
height: 20px;
margin: 1em;
padding: .6em;
background-color: white;
border: 2px solid #CCCCCC;
cursor: pointer;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.btn:hover{
background-color:#5e94ff;
color:white;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialisation(){
var centreCarte = new google.maps.LatLng( 47.389982, 0.688877 );
var optionsCarte = {
zoom: 12,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
var optionsCercle = {
center: centreCarte,
map: maCarte,
radius: 3000
}
var monCercle = new google.maps.Circle( optionsCercle );
google.maps.event.addDomListener( document.getElementById("boutonRetrecir"), "click", function() {
retrecirCercle( monCercle, 3000 )
});
}
function retrecirCercle( objetCercle ){
var rayon = objetCercle.getRadius();
var diminue = 50;
var delai = 30;
function decremente(){
objetCercle.setRadius(rayon);
if(0<=rayon){
rayon=rayon-diminue;
setTimeout(decremente,delai);
}else{
objetCercle.setMap(null);
}
};
setTimeout(decremente,delai);
}
google.maps.event.addDomListener(window, 'load', initialisation);
</script>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<div id="boutonRetrecir" class="btn">Rétrécir Cercle</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>