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

Marqueurs

Introduction

Un marqueur identifie un point géographique sur une carte. Par défaut, les marqueurs utilisent des images standard. Ils peuvent toutefois utiliser également des images personnalisées, auquel cas on les désigne généralement par le terme d'« icônes ». Les marqueurs et les icônes sont des objets de type Marker. Vous pouvez définir une icône personnalisée dans le constructeur du marqueur ou en appelant la méthode setIcon() sur le marqueur. Vous trouverez de plus amples informations sur la personnalisation des marqueurs d'image ci-dessous.

De manière générale, les marqueurs sont un type de superposition. Pour plus d'informations sur d'autres types de superposition, voir Dessiner sur la carte.

Les marqueurs sont conçus pour être interactifs. Par exemple, ils reçoivent par défaut des événements 'click', pour que vous puissiez ajouter un écouteur d'événement et faire ainsi apparaître une fenêtre d'info affichant des informations personnalisées. Vous pouvez autoriser les utilisateurs à déplacer un marqueur sur la carte en définissant la propriété draggable du marqueur sur true. Vous trouverez plus d'informations sur les marqueurs déplaçables ci-dessous.

Ajouter un marqueur

Le constructeur google.maps.Marker utilise un littéral objet Marker options unique qui spécifie les propriétés initiales du marqueur.

Les champs suivants sont particulièrement importants et généralement définis lors de la construction d'un marqueur :

  • position (obligatoire) spécifie les valeurs de latitude-longitude (LatLng) qui identifient l'emplacement initial du marqueur. Le service de géocodage est l'un des outils disponibles pour récupérer des coordonnées LatLng.
  • map (facultatif) spécifie l'objet Map sur lequel placer le marqueur. Si vous ne spécifiez pas la carte lors de la construction du marqueur, ce dernier est créé mais n'est pas associé à (ni affiché sur) la carte. Vous pouvez ajouter le marqueur ultérieurement en appelant la méthode setMap() du marqueur.

L'exemple suivant ajoute un marqueur simple sur une carte, à Uluru, au centre de l'Australie.

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

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

  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>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

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

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

Dans l'exemple ci-dessus, le marqueur est placé sur la carte au moment de sa construction, au moyen de la propriété map dans les options du marqueur. Vous pouvez également ajouter directement le marqueur à la carte en utilisant la méthode setMap() du marqueur, tel qu'illustré dans l'exemple ci-dessous :

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Le titre du marqueur, défini par l'objet title, s'affichera en tant qu'infobulle.

Si vous ne souhaitez pas transmettre de paramètres Marker options au constructeur du marqueur, utilisez à la place un objet vide {} dans le dernier argument du constructeur.

Voir l'exemple (marker-simple.html)

Supprimer un marqueur

Pour effacer un marqueur d'une carte, appelez la méthode setMap(), en indiquant la valeur null comme argument.

marker.setMap(null);

Notez que cette méthode ne supprime pas le marqueur. Cela l'efface simplement de la carte. Si vous souhaitez supprimer le marqueur, vous devez d'abord l'effacer de la carte, puis le définir lui-même sur null.

Si vous souhaitez gérer un ensemble de marqueurs, vous devez créer un tableau pour les stocker. Au moyen de ce tableau, vous pouvez ensuite appeler tour à tour la méthode setMap() sur chaque marqueur du tableau pour les effacer. Vous pouvez supprimer les marqueurs en les effaçant de la carte puis en définissant le code length du tableau sur 0, ce qui efface toutes les références aux marqueurs.

Voir l'exemple (marker-remove.html)

Animer un marqueur

Vous pouvez animer les marqueurs pour leur conférer un mouvement dynamique dans différentes circonstances. Pour spécifier la façon dont un marqueur est animé, utilisez sa propriété animation, de type google.maps.Animation. Les valeurs Animation suivantes sont prises en charge :

  • DROP indique que le marqueur doit tomber du haut de la carte à son point géographique final lorsqu'il est placé sur la carte pour la première fois. L'animation s'arrête lorsque le marqueur devient immobile et que la propriété animation est à nouveau définie sur null. Ce type d'animation est généralement spécifié à la création de l'objet Marker.
  • BOUNCE indique que le marqueur doit rebondir sur place. Un tel marqueur continue à rebondir tant que sa propriété animation n'a pas été explicitement définie sur null.

Vous pouvez initier une animation sur un marqueur existant en appelant la méthode setAnimation() sur l'objet Marker.

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
<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>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Voir l'exemple (marker-animations.html)

Si vous avez un grand nombre de marqueurs, vous ne souhaitez peut-être pas les faire tous tomber en même temps sur la carte. Le cas échéant, vous pouvez utiliser la méthode setTimeout() pour espacer l'animation de vos marqueurs en utilisant un modèle, comme illustré ci-dessous :

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Voir l'exemple (marker-animations-iteration.html)

Personnaliser un marqueur d'image

Si vous souhaitez afficher une lettre ou un nombre sur un marqueur, vous pouvez utiliser un libellé de marqueur. Si vous préférez personnaliser davantage vos marqueurs, vous pouvez définir une icône à afficher à la place de l'image par défaut du marqueur. Définir une icône implique de définir un certain nombre de propriétés qui déterminent le comportement visuel du marqueur.

Les sections ci-dessous décrivent les libellés de marqueur, les icônes simples, les icônes complexes et les symboles (icônes vectorielles).

Libellés de marqueur

Un libellé de marqueur est une lettre ou un nombre affiché à l'intérieur d'un marqueur. L'image de marqueur utilisée dans cette section affiche un libellé de marqueur avec la lettre « B ». Vous pouvez spécifier un libellé de marqueur soit en tant que chaîne, soit en tant qu'objet MarkerLabel incluant une chaîne et d'autres propriétés de libellé.

Lorsque vous créez un marqueur, vous pouvez spécifier une propriété label dans l'objet MarkerOptions. Vous pouvez également appeler la méthode setLabel() sur l'objet Marker pour appliquer un libellé à un marqueur existant.

L'exemple suivant affiche des marqueurs avec libellés lorsque l'utilisateur clique sur la carte :

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
<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"></script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Voir l'exemple (marker-labels.html)

Icônes simples

Dans les cas les plus basiques, une icône peut simplement indiquer une image à utiliser à la place de l'icône de punaise par défaut de Google Maps. Pour spécifier une telle icône, définissez la propriété icon du marqueur sur l'URL d'une image. Google Maps JavaScript API redimensionne automatiquement l'icône.

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}
<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>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Voir l'exemple (icon-simple.html)

Icônes complexes

Vous pouvez spécifier des formes complexes pour indiquer des régions cliquables et définir la façon dont les icônes doivent s'afficher par rapport à d'autres superpositions (leur « ordre d'empilement »). Les propriétés icon des icônes spécifiées de la sorte doivent être définies sur un objet de type Icon.

Les objets Icon définissent une image. Ils définissent également la taille de l'icône via sa propriété size, son origine via sa propriété origin (si l'image que vous souhaitez utiliser fait partie d'une image plus large dans un sprite, par exemple) et l'endroit où le point sensible de l'icône devrait être situé (en fonction de son origine) via sa propriété anchor.

Si vous utilisez une libellé avec un marqueur personnalisé, vous pouvez positionner le libellé via la propriété labelOrigin de l'objet Icon.

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}
<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>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Voir l'exemple (icon-complex.html)

Convertir des objets MarkerImage en objets de type Icon

Jusqu'à la version 3.10 de Google Maps JavaScript API, les icônes complexes étaient définies en tant qu'objets MarkerImage. Le littéral objet Icon a été ajouté dans la version 3.10 et remplace l'objet MarkerImage depuis la version 3.11. Le littéral objet Icon prend en charge les mêmes paramètres que l'objet MarkerImage, ce qui vous permet de facilement convertir des objets MarkerImage en objets Icon en supprimant le constructeur, en mettant les paramètres précédents entre {} et en ajoutant le nom de chaque paramètre. Par exemple :

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

devient

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Symboles

Outres les images matricielles, les marqueurs prennent en charge l'affichage de tracés vectoriels appelés Symbols. Pour afficher un tracé vectoriel, transmettez un littéral objet Symbol avec le tracé souhaité à la propriété icon du marqueur. Vous pouvez utiliser l'un des tracés prédéfinis dans google.maps.SymbolPath ou définir un tracé personnalisé en utilisant une notation de tracé SVG.

Pour plus d'informations, voir la documentation sur les symboles.

Rendre un marqueur déplaçable

Pour permettre aux utilisateurs de déplacer un marqueur jusqu'à un autre point géographique d'une carte, définissez la propriété draggable sur true dans les options du marqueur.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Envoyer des commentaires concernant…

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