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

Fenêtre d'info

  1. Introduction
  2. Ajouter une fenêtre d'info
  3. Ouvrir une fenêtre d'info
  4. Fermer une fenêtre d'info
  5. Déplacer une fenêtre d'info

Introduction

Une fenêtre d'info (InfoWindow) affiche un contenu (généralement du texte ou des images) dans une fenêtre contextuelle au-dessus de la carte, à un point géographique donné. La fenêtre d'info est composée d'une zone de contenu et d'un pied effilé. L'extrémité du pied est reliée à un point géographique spécifié sur la carte.

En règle générale, les fenêtres d'info sont associées à un marqueur. Vous pouvez toutefois les associer également à une latitude/longitude spécifique, tel que décrit dans la section sur l'ajout d'une fenêtre d'info ci-dessous.

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

Ajouter une fenêtre d'info

Le constructeur d'objets InfoWindow utilise un littéral objet InfoWindowOptions qui spécifie les paramètres initiaux de l'affichage de la fenêtre d'info.

Le littéral objet InfoWindowOptions contient les champs suivants :

  • content contient soit une chaîne de texte, soit un nœud DOM pour afficher la fenêtre d'info.
  • pixelOffset contient le décalage entre l'extrémité de la fenêtre d'info et le point géographique sur lequel elle est ancrée. En pratique, il n'est pas nécessaire de modifier ce champ. Vous pouvez laisser la valeur par défaut.
  • position contient les valeurs LatLng auxquelles la fenêtre d'info est ancrée. Remarque : Une fenêtre InfoWindow peut être associée soit à un objet Marker (auquel cas sa position dépend de l'emplacement du marqueur), soit à la carte elle-même, sur des coordonnées LatLng spécifiées. Le service de géocodage est l'un des moyens disponibles de récupérer des coordonnées LatLng. Ouvrir une fenêtre d'info sur un marqueur met automatiquement à jour l'objet position.
  • maxWidth indique la largeur maximale de la fenêtre d'info en pixels. Par défaut, la taille d'une fenêtre d'info s'ajuste automatiquement au contenu, et un habillage automatique du texte est effectué si la fenêtre d'info remplit la carte. Si vous précisez l'option maxWidth, la fenêtre d'info effectue l'habillage automatique en fonction de la largeur spécifiée. Si la largeur maximale est atteinte mais que l'écran offre un espace vertical suffisant, la fenêtre d'info peut se développer verticalement.

L'objet InfoWindow peut contenir une chaîne de texte, un extrait de code HTML ou un élément DOM. Pour définir le contenu, vous devez soit le spécifier dans l'objet InfoWindowOptions, soit appeler explicitement setContent() dans l'objet InfoWindow.

Si vous souhaitez définir précisément la taille du contenu, vous pouvez l'insérer dans un élément <div> et utiliser des feuilles de styles CSS pour appliquer un style à cet élément. Vous pouvez également utiliser des feuilles de style CSS pour permettre le défilement. Notez que si vous n'activez pas le défilement et que le contenu dépasse l'espace disponible dans la fenêtre d'info, le contenu risque de déborder de la fenêtre d'info.

Ouvrir une fenêtre d'info

Lorsque vous créez une fenêtre d'info, elle ne s'affiche pas automatiquement sur la carte. Pour rendre la fenêtre d'info visible, vous devez appeler la méthode open() sur l'objet InfoWindow, en lui spécifiant l'objet Map sur lequel ouvrir la fenêtre d'info et, éventuellement, l'objet Marker sur lequel l'ancrer. Si aucun marqueur n'est fourni, la fenêtre d'info s'ouvrira à l'emplacement défini par la propriété position.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<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 displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Voir l'exemple (infowindow-simple.html)

L'exemple suivant définit la valeur maxWidth d'une fenêtre d'info : Voir l'exemple (infowindow-simple-max.html)

Fermer une fenêtre d'info

Par défaut, une fenêtre InfoWindow reste ouverte jusqu'à ce que l'utilisateur clique sur le bouton de fermeture (une croix en haut à droite de la fenêtre). Si vous le souhaitez, vous pouvez fermer explicitement la fenêtre d'info en appelant sa méthode close().

Déplacer une fenêtre d'info

Il existe deux façons pour modifier la position d'une fenêtre d'info :

  • Appeler setPosition() sur la fenêtre d'info ; ou
  • Associer la fenêtre d'info à un nouveau marqueur en utilisant la méthode InfoWindow.open(). Remarque : Si vous appelez la méthode open() sans transmettre de marqueur, l'objet InfoWindow utilisera la position spécifiée durant la construction via le littéral objet InfoWindowOptions.

Envoyer des commentaires concernant…

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