Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Comportement de défilement et de panoramique

L'option gestureHandling de l'objet MapOptions vous permet de contrôler le comportement de défilement et de panoramique d'une carte affichée sur un appareil mobile.

Exemple

Dans l'exemple suivant, l'option est définie sur cooperative. Visualisez la démo sur un appareil mobile pour observer le code en action.

/**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Cooperative Gesture Handling</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>

      /**
       * This sample sets the gesture handling mode to 'cooperative',
       * which means that on a mobile device, the user must swipe with one
       * finger to scroll the page and two fingers to pan the map.
       */
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: 'cooperative'
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Prise en charge des gestes

Sur le Web pour mobile, il peut être gênant que la carte effectue un panoramique lorsque l'utilisateur balaye l'écran pour faire défiler la page.

Pour optimiser l'expérience utilisateur lors des interactions avec la carte, vous pouvez utiliser l'option gestureHandling de l'objet MapOptions proposé dans Google Maps JavaScript API. Les valeurs possibles sont :

  • greedy : La carte effectue toujours un panoramique (en haut ou en bas, à gauche ou à droite) lorsque l'utilisateur balaye (ou fait glisser) l'écran. En d'autres termes, tout balayage à un doigt ou à deux doigts génère un panoramique.
  • cooperative : L'utilisateur doit balayer l'écran avec un doigt pour faire défiler la page et avec deux doigts pour effectuer un panoramique de la carte. Si l'utilisateur balaye la carte avec un doigt, une superposition s'affiche sur la carte, avec une invite qui indique d'utiliser les deux doigts pour déplacer la carte. Visualisez l'échantillon ci-dessous sur un appareil mobile pour observer le mode coopératif en action.
  • none : L'utilisateur ne peut pas pincer la carte ni effectuer de panoramique.
  • auto (valeur par défaut) : Le comportement est cooperative ou greedy, selon que la page peut défiler ou non. En d'autres termes, si l'option est définie sur auto, l'API choisit le comportement suivant :
    • cooperative si le corps de la page est plus grand que la fenêtre ou si l'API ne peut pas déterminer la taille de la page (s'il s'agit d'un iframe, par exemple).
    • greedy si le corps de la page n'est pas plus grand que la fenêtre et qu'il est donc peu probable que l'utilisateur souhaite le faire défiler.

Comme la commande plein écran est visible par défaut sur les appareils mobiles, l'utilisateur peut facilement agrandir la carte. Lorsque la carte est en mode plein écran, l'utilisateur peut effectuer un panoramique de la carte avec un ou deux doigts. Remarque : iOS ne prend pas en charge la fonctionnalité plein écran. La commande de plein écran n'est donc pas visible sur les appareils iOS.

Événements

L'API déclenche les événements suivants, entre autres, lorsque l'utilisateur fait défiler (ou glisser) la carte :

  • drag : Déclenché en continu lorsque l'utilisateur fait glisser la carte.
  • dragstart : Déclenché lorsque l'utilisateur commence à faire glisser la carte.
  • dragend : Déclenché lorsque l'utilisateur cesse de faire glisser la carte.

Pour plus d'informations, voir le guide sur les événements et la référence.

Restrictions et limitations

Les restrictions suivantes s'appliquent au comportement défini par l'option gestureHandling :

  • Appareils tactiles uniquement : Les options gestureHandling s'appliquent uniquement si l'utilisateur affiche la page sur un appareil qui prend en charge une interface tactile.
  • Événements de toucher uniquement : Les options gestureHandling ne s'appliquent pas aux événements de la souris ni à ceux du stylet.
  • Non applicable aux cartes avec connexion : Les options gestureHandling ne s'appliquent pas aux cartes où la connexion est activée.
  • Non applicable à Street View : Les options gestureHandling ne s'appliquent pas au service Street View.

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.