Créer une animation pour agrandir un cercle sur une carte Google Maps
Ce tutoriel est basé sur le code de l'exemple intitulé : Afficher un cercle sur une carte Google Maps.
var optionsCarte = {
zoom: 15,
center: {lat: 47.389982, lng: 0.688877},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var optionsCercle = {
map: maCarte,
center: maCarte.getCenter(),
radius: 500
}
var monCercle = new google.maps.Circle(optionsCercle);
Nous allons modifier ce code afin de créer un cercle :
- dont le rayon initial est nul (
radius: 0), - puis augmenter son rayon de 50 mètres toutes les 30 millisecondes jusqu'à ce qu'il atteigne la valeur maximale de 3.000 mètres.
Carte Google Maps avec un cercle dont le rayon augmente créant une animation
Pour voir l'animation, cliquez sur le bouton "Agrandir Cercle" ci-dessous.
Le rayon du cercle, initialement nul, va alors augmenter de 50 mètres toutes les 30 millisecondes jusqu'à atteindre 3.000 mètres.
Fonction pour agrandir le rayon du cercle sur une carte Google Maps
Nous allons créer une fonction nommée agrandirCercle() qui va nous permettre d'agrandir, de façon dynamique, un cercle sur une carte créée à l'aide de l'API Google Maps JavaScript Version3.
Cette fonction attend deux paramètres :
objetCercle: objet créé à partir de la classeCircleet que l'on souhaite agrandir,rayonFinal: rayon maximal du cercle une fois agrandi (en mètres).
A l'intérieur de la fonction agrandirCercle() trois variables sont définies :
- trois variables sont définies :
rayon: le rayon initial du cercle (en mètres),ajoute: distance ajoutée 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
incremente().
Dans notre exemple, les 3 variables sont définies afin que le rayon initial du cercle soit nul, puis pour qu'il augmente de 50 mètres toutes les 30 millisecondes jusqu'à atteindre la valeur maximale égale à rayonFinal, soit 3.000 mètres.
La fonction incremente() est directement chargée d'augmenter la taille du rayon du cercle, tant que celle-ci est inférieure ou égale à la valeur maximale définie rayonFinal.
Pour modifier la valeur du rayon de l'objet monCercle il suffit d'utiliser la méthode setRadius() de la classe Circle:
monCercle.setRadius( rayon );
Cette ligne de code est insérée dans la fonction nommée incremente(). Cette fonction est appelée par setTimeout() toutes les 30 millisecondes afin d'agrandir le rayon du cercle tant que celui-ci est inférieur ou égal au rayonFinal.
function agrandirCercle( objetCercle, rayonFinal ) {
var rayon = 0;
var ajoute = 50;
var delai = 30;
function incremente() {
objetCercle.setRadius( rayon );
if( rayon <= rayonFinal ) {
rayon = rayon + ajoute;
setTimeout( incremente, delai );
}
};
setTimeout( incremente, delai );
}
Cliquer sur un bouton pour animer et agrandir 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 google.maps.event.addDomListener().
Cet élément est la balise <div id="boutonAgrandir">Agrandir Cercle</div>.
Tout click sur le bouton "Agrandir Cercle" appellera la fonction agrandirCercle en lui passant en paramètres :
monCercle: l'objet cercle que l'on souhaite agrandir3000: le rayon final ( ou maximum ) en mètres de notre cercle
/**
* Javascript
*/
google.maps.event.addDomListener( document.getElementById("boutonAgrandir"), "click", function(){
agrandirCercle( monCercle, 3000 )
});
/**
* Dans le BODY
*/
<div id="boutonAgrandir">Agrandir Cercle</div>
Selon les caractéristiques de votre ordinateur et/ou navigateur la fluidité de l'animation peut être très variable.
Code pour créer un cercle animé sur une carte Google Maps grâce à l'augmentation de son rayon
Grâce au code de ce tutoriel vous avez appris à créer un cercle s'affichant de façon dynamique sur une carte.
Le rayon de ce cercle augmente de 50 mètres toutes les 30 millisecondes jusqu'à ce qu'il atteigne sa valeur maximale fixée à 3.000 mètres.
<!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: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>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<div id="boutonAgrandir" class="btn">Agrandir 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>
<script>
function initialisation(){
var optionsCarte = {
zoom: 12,
center: {lat: 47.389982, lng: 0.688877}
};
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
var optionsCercle = {
center: maCarte.getCenter(),
map: maCarte,
radius: 0
};
var monCercle = new google.maps.Circle( optionsCercle );
google.maps.event.addDomListener( document.getElementById("boutonAgrandir"), "click", function() {
agrandirCercle( monCercle, 3000 )
});
}
function agrandirCercle( objetCercle, rayonFinal ) {
var rayon = 0;
var ajoute = 50;
var delai = 30;
function incremente() {
objetCercle.setRadius( rayon );
if( rayon<=rayonFinal ) {
rayon=rayon+ajoute;
setTimeout( incremente, delai );
}
};
setTimeout( incremente, delai );
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
</body>
</html>