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

Calque Drawing (bibliothèque)

  1. Présentation
  2. Utiliser la bibliothèque
  3. Options DrawingManager
  4. Mettre à jour la commande des outils de dessin
  5. Événements de dessin

Présentation

La classe DrawingManager offre aux utilisateurs une interface graphique pour dessiner des polygones, des rectangles, des polylignes, des cercles et des marqueurs sur une carte.

Utiliser la bibliothèque

Les outils de dessin constituent une bibliothèque autonome, séparée du code Maps API JavaScript principal. Pour utiliser les fonctionnalités contenues dans cette bibliothèque, vous devez d'abord la charger en utilisant le paramètre libraries dans l'URL bootstrap de Maps API :

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

Après avoir ajouté le paramètre libraries, vous pouvez créer un objet DrawingManager comme suit :

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Options DrawingManager

Le constructeur de DrawingManager utilise un ensemble d'options qui définissent les commandes à afficher, leur position et l'état de dessin initial.

  • La propriété drawingMode de DrawingManager définit l'état de dessin initial de l'objet DrawingManager. Elle accepte une constante google.maps.drawing.OverlayType. La valeur par défaut est null. Dans ce cas, le curseur n'est pas en mode de dessin au moment où DrawingManager est initialisé.
  • La propriété drawingControl de DrawingManager définit la visibilité de l'interface de sélection des outils de dessin sur la carte. Elle accepte une valeur booléenne.
  • Vous pouvez également utiliser la propriété drawingControlOptions de DrawingManager pour définir la position de la commande, ainsi que les types de superpositions à représenter dans la commande.
    • La propriété position définit la position de la commande de dessin sur la carte. Elle accepte une constante google.maps.ControlPosition.
    • La propriété drawingModes est un tableau de constantes google.maps.drawing.OverlayType. Elle définit les types de superpositions à inclure dans le sélecteur de formes de la commande de dessin. L'icône de main est toujours présente. Elle permet à l'utilisateur d'interagir avec la carte sans les outils de dessin. L'ordre des outils dans la commande est identique à l'ordre dans lequel ils sont déclarés dans le tableau.
  • Il est possible d'attribuer des propriétés par défaut à tout type de superposition pour définir l'apparence de la superposition au moment où elle est créée. Ces propriétés sont définies dans la propriété {overlay}Options de la superposition (où {overlay} représente le type de superposition). Par exemple, pour un cercle, les propriétés de remplissage et de trait, le zIndex et la prise en charge du clic peuvent être définis dans la propriété circleOptions. Si des valeurs de taille, de carte ou de localisation sont spécifiées, elles sont ignorées. Pour plus de détails concernant la configuration des propriétés, voir la documentation de référence de l'API.

Remarque : Pour qu'une forme soit modifiable par l'utilisateur après avoir été créée, définissez sa propriété editable sur true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

Voir l'exemple (drawing-tools.html).

Mettre à jour la commande des outils de dessin

Après avoir créé l'objet DrawingManager, pour le mettre à jour, appelez setOptions() et spécifiez de nouvelles valeurs.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Pour masquer ou afficher la commande des outils de dessin :

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Pour supprimer la commande des outils de dessin de l'objet map :

drawingManager.setMap(null);

Si vous masquez la commande de dessin, la commande des outils de dessin ne s'affiche plus, mais toutes les fonctionnalités de la classe DrawingManager restent disponibles. Ainsi, vous pouvez implémenter vos propres commandes, si vous le souhaitez. Si vous supprimez l'objet DrawingManager de l'objet map, toutes les fonctionnalités de dessin sont désactivées. Pour rétablir les composants de dessin, le cas échéant, vous devrez à nouveau associer l'objet à la carte en utilisant drawingManager.setMap(map) ou créer un nouvel objet DrawingManager.

Événements de dessin

La création d'une superposition de forme déclenche deux événements :

  • Un événement {overlay}complete, où {overlay} représente le type de superposition (circlecomplete ou polygoncomplete, par exemple). Une référence à la superposition est spécifiée en argument.
  • Un événement overlaycomplete. Un littéral objet, contenant le type de superposition (OverlayType) et une référence à la superposition, est spécifié en argument.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Notez que les événements google.maps.Map (click et mousemove, par exemple) sont désactivés lorsque vous dessinez sur la carte.

Envoyer des commentaires concernant…

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