"Smart scrolling" pour la version mobile de Google Maps

Si vous mettez en place un site Web prochainement, vos utilisateurs seront bien plus susceptibles de le consulter sur un appareil mobile que sur un ordinateur de bureau ou un ordinateur portable. La tendance actuelle du web est sans équivoque : l'ère est au "Mobile first" voire de plus en plus au "Mobile only". Dans ce contexte, Google propose beaucoup de ressources pour aider les développeurs à faire en sorte que leurs sites Web se démarquent sur le marché du mobile, depuis un guide pour la construction de sites Web mobiles conviviaux, jusqu'à un outil de test mobile, en passant par un format révolutionnaire dédié au mobile, l'AMP pour "Accelerated Mobile Pages" offrant un confort de lecture aussi important que la qualité du contenu, et la technologie des "Progressive Web Apps".

Les utilisateurs du Web mobile sont souvent frustrés lorsqu'ils essayent de faire défiler une page en mode "scrolling" intégrant une Google Maps. Car, sur la carte incorporée à l'expérience, il est difficile de concilier exploration de la carte et parcours de la page qui la contient. Cela peut même conduire des utilisateurs à rester "coincés" sur la carte et à devoir recharger la page web tout entière afin de revenir au reste de leur lecture et de poursuivre leur navigation.


Dorénavant, Google permet un défilement intuitif pour les sites contenant des Google Maps intégrées et rend le contrôle plein écran visible par défaut sur les appareils mobiles. Cela devrait donner à vos utilisateurs une expérience plus interactive avec la carte, plus intuitive et moins frustrante sur les navigateurs mobiles.

Le piège de la carte
Les ingénieurs de Google ont donc ajouté une nouvelle option gestureHandling à l'API Google Maps JavaScript. Ce paramètre contrôle le traitement des mouvements tactiles * sur la carte.``

Valeurs :
 - "cooperative" : deux doigts permettent de zoomer et de naviguer sur la carte, comme on le fait avec une souris. L'utilisation d'un seul doigt sur la carte ne sert à rien. Dans ce mode, la carte est synchrone avec la page, de sorte que les gestes tactiles d'un doigt permettent de parcourir la page tout entière.
- "greedy" : tous les gestes tactiles permettent de zoomer et de naviguer sur la carte. C'était le comportement précédent.
- "none" : la carte ne peut pas être explorée ni zoomée par les gestes de l'utilisateur.
- "auto" : la gestion des gestes est automatiquement configurée en "cooperative" ou "greedy", selon qu'il soit possible ou non de faire défiler la page (définie par une comparaison des dimensions de la page et des dimensions de la fenêtre).
     - S'il est possible de faire défiler la page, "auto" définit le mode de gestion des mouvements en mode 
       "cooperative".
     - S'il n'est pas possible de faire défiler la page, "auto" définit le mode "greedy".
     - Si la carte se trouve dans un iFrame, "auto" définit la gestion des mouvements en mode "cooperative" car l'API ne peut pas déterminer s'il est possible de faire défiler la page ou pas.


* Notez qu'il n'existe actuellement aucun moyen de modifier le mode de gestion de la navigation lors de l'exploration dans Street View ; ces options affectent uniquement la façon dont les gestes sont gérés pour Google Maps. Si vous souhaitez voir cette extension se faire à Street View dans un futur proche, n'hésitez pas à le faire savoir aux ingénieurs de Google sur la plateforme de remontée d'idées issue tracker.


Vous pouvez activer l'un de ces quatre modes de gestion des mouvements en ajoutant le champ correspondant à l'objet MapOptions. Par exemple :

map = new google.maps.Map(document.getElementById('map-div'), {
gestureHandling: 'cooperative',
center: {lat: -34.397, lng: 150.644},
zoom: 8
});

Si l'option gestureHandling n'est pas définie, la valeur par défaut est auto, car cela choisit automatiquement ce que les ingénieurs de Google pensent être le meilleur comportement basé sur ce que le navigateur peut détecter sur le placement de la carte dans la page. Si vous préférez toujours utiliser l'ancien mode de gestion des mouvements de la carte pour les utilisateurs qui consultent votre site sur des appareils mobiles, modifiez la valeur de gestureHandling en greedy, ce qui laisse tous les gestes de l'utilisateur sur la carte.

Google Maps sur un smartphone affiche cette superposition au toucher

L'option draggable: false a été remplacée par gestureHandling: 'none'. L'ancienne option
draggable est maintenant obsolète, mais Google va maintenir la compatibilité avec les versions antérieures. Les développeurs qui ont précédemment désactivé l'interaction de la carte en mettant draggable sur
false maintiendront leurs cartes non interactives existantes.

Maximisation de la carte lorsque vous en avez besoin
D'après les études réalisées par Google, beaucoup d'utilisateurs ont déclaré avoir trouvé que les petites cartes intégrées sur les appareils mobiles étaient difficiles à manipuler et qu'ils préféraient interagir avec une carte plus grande. Pour répondre à cette demande, Google a rendu le contrôle "plein écran" visible par défaut sur les appareils mobiles. Le contrôle "plein écran" permet à l'utilisateur de rendre la carte plus grande à loisir. Lorsque la carte est en mode "plein écran", l'utilisateur peut parcourir la carte (en haut, en bas, à droite, à gauche) en utilisant un seul doigt. En tant que développeur, vous pouvez activer ou désactiver le contrôle "plein écran", en définissant l'option fullscreenControl sur true ou false dans l'objet MapOptions.
Lorsque la carte est en mode "plein écran", un seul doigt permet de parcourir la carte tout entière, car il n'y a pas d'autres pages environnantes à parcourir.


Le paramètre par défaut de fullscreenControl est true sur les navigateurs mobiles et false sur les navigateurs de bureau, car le problème des cartes trop petites pour une interaction efficace ne se produit généralement que sur les appareils mobiles.

Le contrôle plein écran permet à l'utilisateur d'afficher la carte en grand pour faciliter l'interaction

Visionnez cette démonstration sur un appareil mobile afin de voir comment le bouton plein écran et le mode de gestion des mouvements cooperative (ou le mode de manipulation auto des mouvements sur un site déroulant) apparaîtront à vos utilisateurs.

Pour plus d'informations sur l'API JavaScript de Google Maps, consultez la documentation Développeurs ou consultez les notes sur les dernières nouveautés.


Elena Kelareva, Product Manager de l'équipe Google Maps APIs, à l'origine de cette annonce, a remercié tous les développeurs qui utilisent l'API Google Maps JavaScript et qui fournissent des commentaires via le service de suivi des problèmes. Obtenir les doléances et les conseils de la communauté des développeurs est essentiel pour que Google puisse continuer à améliorer ses produits, donc si vous avez des rapports de bug ou des demandes de nouvelles fonctionnalités à ajouter, veuillez le faire savoir.