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

Commandes

Présentation des commandes

Les cartes affichées via Google Maps JavaScript API contiennent des éléments d'interface utilisateur afin de permettre à l'utilisateur d'interagir avec la carte. Ces éléments sont appelés commandes et vous pouvez en inclure des variantes dans votre application. Vous pouvez également décider de ne rien faire et laisser Google Maps JavaScript API gérer la totalité du comportement des commandes.

La carte suivante montre l'ensemble des commandes par défaut affichées par Google Maps JavaScript API :

Voir l'exemple (control-default.html).

Voici la liste de l'ensemble complet des commandes que vous pouvez utiliser dans vos cartes :

  • La commande de zoom affiche des boutons « + » et « - » permettant de modifier le niveau de zoom de la carte. Cette commande apparaît par défaut dans l'angle inférieur droit de la carte.
  • La commande de type de carte est disponible dans un menu déroulant ou sous forme de barre de boutons horizontale. Elle permet à l'utilisateur de choisir un type de carte (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Cette commande apparaît par défaut dans l'angle supérieur gauche de la carte.
  • La commande Street View contient une icône de Pegman qu'il est possible de glisser sur la carte pour activer Street View. Cette commande apparaît par défaut dans la partie inférieure droite de la carte.
  • La commande de rotation offre une combinaison d'options d'inclinaison et de rotation pour les cartes contenant des images obliques. Cette commande apparaît par défaut dans la partie inférieure droite de la carte. Pour plus d'informations, voir Images à 45°.
  • La commande d'échelle affiche un élément d'échelle de carte. Cette commande est désactivée par défaut.
  • La commande Fullscreen control vous permet d'ouvrir la carte en mode plein écran. Cette commande est activée par défaut sur les appareils mobiles, et est désactivée par défaut sur les ordinateurs de bureau. 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.

Vous ne pouvez pas directement modifier ou accéder à ces commandes. En revanche, vous pouvez modifier les champs MapOptions de la carte afin de jouer sur la visibilité et la présentation des commandes. Vous pouvez ajuster la présentation des commandes lorsque vous instanciez votre carte (avec les MapOptions appropriées) ou modifier une carte de manière dynamique en appelant setOptions() afin de modifier les options de la carte.

Toutes ces commandes sont activées par défaut. Pour en savoir plus sur le comportement de l'interface utilisateur par défaut (et comment modifier ce comportement), voir Interface utilisateur par défaut ci-dessous.

Interface utilisateur par défaut

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci est trop petite (200 x 200 pixels). Vous pouvez annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Voir Ajouter des commandes à la carte.

Le comportement et l'apparence des commandes sont les mêmes sur les appareils mobiles et les ordinateurs de bureau, à l'exception de la commande plein écran (voir le comportement décrit dans la liste des commandes).

En outre, la gestion du clavier est activée par défaut sur tous les appareils.

Désactiver l'interface utilisateur par défaut

Il est possible de désactiver entièrement les paramètres de l'interface utilisateur par défaut de l'API. Pour ce faire, définissez la propriété disableDefaultUI de la carte (dans l'objet MapOptions) sur true. Cette propriété désactive tout comportement automatique de l'interface utilisateur de Google Maps JavaScript API.

Le code suivant désactive entièrement l'interface utilisateur par défaut :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

Voir l'exemple (control-disableUI.html).

Ajouter des commandes à la carte

Vous pouvez personnaliser votre interface en supprimant, ajoutant ou modifiant le comportement ou les commandes de l'interface utilisateur. Vous pouvez également vous assurer que les mises à jour à venir n'auront pas d'impact sur ce comportement. Si vous voulez uniquement ajouter ou modifier un comportement existant, vous devez veiller à ce que la commande soit ajoutée explicitement à votre application.

Certaines commandes sont affichées sur la carte par défaut tandis que d'autres n'apparaissent pas si vous n'en faites pas la demande spécifique. L'ajout ou la suppression de commandes de la carte sont spécifiés dans les champs suivants de l'objet MapOptions, que vous définissez sur true pour les rendre visibles ou sur false pour les masquer :

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci a une taille inférieure à 200 x 200 pixels. Vous pouvez annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Par exemple, le tableau suivant montre si la commande de zoom est visible ou pas en fonction de la taille de la carte et du paramétrage du champ zoomControl :

Taille de la carte zoomControl Visible ?
Toutes tailles false Non
Toutes tailles true Oui
>= 200 x 200 px undefined Oui
< 200 x 200 px non défini Non

Dans l'exemple suivant, la carte est paramétrée de manière à masquer la commande de zoom et à afficher la commande d'échelle. Notez que l'interface utilisateur par défaut n'est pas désactivée explicitement ; ces modifications viennent donc s'ajouter au comportement de l'interface utilisateur par défaut.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

Voir l'exemple (control-simple.html).

Options de commande

Plusieurs options peuvent être configurées, ce qui vous permet de modifier leur comportement ou de changer leur apparence. La commande de type de carte, par exemple, peut apparaître sous forme de barre horizontale ou de menu déroulant.

Ces commandes sont modifiées en changeant les champs des options de commande dans l'objet MapOptions lors de la création de la carte.

Par exemple, les options qui modifient la commande de type de carte se trouvent dans le champ mapTypeControlOptions. La commande de type de carte peut apparaître dans l'une des options style suivantes :

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR affiche la série de commandes sous forme de boutons dans une barre horizontale, comme dans Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU affiche une commande à un seul bouton vous permettant de sélectionner le type de carte à partir d'un menu déroulant.
  • google.maps.MapTypeControlStyle.DEFAULT affiche le comportement par défaut, qui dépend de la taille de l'écran et qui peut être amené à changer dans les futures versions de l'API.

Notez que si vous modifiez des options de commande, vous devez aussi activer la commande explicitement en définissant la valeur MapOptions appropriée sur true. Par exemple, pour paramétrer une commande de type de carte afin d'afficher le style DROPDOWN_MENU, utilisez le code suivant dans l'objet MapOptions :

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

L'exemple suivant montre comment modifier la position et le style par défaut des commandes.

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}
<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>
// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

Voir l'exemple (control-options.html)

Les commandes sont généralement configurées lors de la création de la carte. Cependant, vous pouvez modifier la présentation des commandes de manière dynamique en appelant la méthode setOptions() de Map et en spécifiant de nouvelles options de commande.

Modifier les commandes

Vous spécifiez la présentation d'une commande lorsque vous créez votre carte grâce à des champs se trouvant dans l'objet MapOptions de la carte. Ces champs sont décrits ci-dessous :

  • zoomControl active/désactive la commande de zoom. Par défaut, cette commande est visible et apparaît dans la partie inférieure droite de la carte. Le champ zoomControlOptions spécifie en outre les options ZoomControlOptions à utiliser pour cette commande.
  • mapTypeControl active/désactive la commande de type de carte qui permet à l'utilisateur de basculer entre les différents types de carte (comme Map et Satellite). Par défaut, cette commande est visible et apparaît dans l'angle supérieur gauche de la carte. Le champ mapTypeControlOptions spécifie en outre les options MapTypeControlOptions à utiliser pour cette commande.
  • streetViewControl active/désactive la commande Pegman qui permet à l'utilisateur d'activer un panorama Street View. Par défaut, cette commande est visible et apparaît dans la partie inférieure droite de la carte. Le champ streetViewControlOptions spécifie en outre les options StreetViewControlOptions à utiliser pour cette commande.
  • rotateControl active/désactive l'affichage de la commande de rotation permettant de contrôler l'orientation des images à 45°. Par défaut, l'affichage de la commande est déterminé par la présence ou l'absence d'images à 45° pour le type de carte donné au niveau de zoom et au point géographique actuels. Vous pouvez modifier le comportement de la commande en définissant le champ rotateControlOptions de la carte afin de spécifier les options RotateControlOptions à utiliser. Vous ne pouvez pas afficher la commande si aucune image à 45° n'est disponible actuellement.
  • scaleControl active/désactive la commande d'échelle qui fournit une échelle de carte simple. Cette commande n'est pas visible par défaut. Lorsqu'elle est activée, elle apparaît toujours dans l'angle inférieur droit de la carte. Le champ scaleControlOptions spécifie en outre les options ScaleControlOptions à utiliser pour cette commande.
  • fullscreenControl active/désactive la commande qui ouvre la carte en mode plein écran. Par défaut, cette commande est visible sur les appareils mobiles et non visible sur les ordinateurs de bureau. Lorsqu'elle est activée, la commande apparaît près du coin supérieur droit de la carte. Le champ fullscreenControlOptions spécifie en outre les options FullscreenControlControlOptions à utiliser pour cette commande.

Notez que vous pouvez spécifier des options pour des commandes que vous avez désactivées initialement.

Positionnement des commandes

La plupart des options de commande contiennent une propriété position (du type ControlPosition) qui indique où placer la commande sur la carte. Le positionnement de ces commandes n'est pas absolu. L'API les positionnera donc de manière intelligente autour des éléments existants sur la carte, ou des autres commandes, dans les limites données (comme la taille de la carte).

Remarque : Bien que l'API tente de les organiser de manière intelligente, il n'est pas garanti que les commandes ne se chevauchent pas en cas de disposition compliquée.

Les positions de commande suivantes sont prises en charge :

  • TOP_CENTER indique que la commande doit être placée en haut au centre de la carte.
  • TOP_LEFT indique que la commande doit être placée en haut à gauche de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre supérieur.
  • TOP_RIGHT indique que la commande doit être placée en haut à droite de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre supérieur.
  • LEFT_TOP indique que la commande doit être placée en haut à gauche de la carte, mais en dessous de tout élément TOP_LEFT.
  • RIGHT_TOP indique que la commande doit être placée en haut à droite de la carte, mais en dessous de tout élément TOP_RIGHT.
  • LEFT_CENTER indique que la commande doit être placée sur le côté gauche de la carte, centrée entre les positions TOP_LEFT et BOTTOM_LEFT.
  • RIGHT_CENTER indique que la commande doit être placée sur le côté droit de la carte, centrée entre les positions TOP_RIGHT et BOTTOM_RIGHT.
  • LEFT_BOTTOM indique que la commande doit être placée en bas à gauche de la carte, mais au-dessus de tout élément BOTTOM_LEFT.
  • RIGHT_BOTTOM indique que la commande doit être placée en bas à droite de la carte, mais au-dessus de tout élément BOTTOM_RIGHT.
  • BOTTOM_CENTER indique que la commande doit être placée en bas au centre de la carte.
  • BOTTOM_LEFT indique que la commande doit être placée en bas à gauche de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre inférieur.
  • BOTTOM_RIGHT indique que la commande doit être placée en bas à droite de la carte, et que tous les sous-éléments de la commande sont répartis vers le centre inférieur.

Voir l'exemple (control-positioning-labels.html).

Notez que ces positions peuvent coïncider avec des positions des éléments de l'interface utilisateur dont vous ne pouvez pas modifier l'emplacement (comme les copyrights et le logo Google). Dans ce cas, les commandes sont réparties selon la logique notée pour chaque position et apparaissent aussi près que possible de leur position indiquée.

L'exemple suivant montre une carte simple où toutes les commandes sont activées à des positions différentes.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

Voir l'exemple (control-positioning.html).

Commandes personnalisées

Outre la modification du style et de la position des commandes d'API existantes, vous pouvez créer vos propres commandes afin de gérer les interactions avec l'utilisateur. Les commandes sont des widgets fixes qui flottent en haut d'une carte à une position absolue, par opposition aux superpositions, qui se déplacent avec la carte en dessous d'elles. Fondamentalement, une commande est simplement un élément <div> ayant une position absolue sur la carte, qui affiche une partie de l'interface à l'utilisateur et gère les interactions avec celui-ci ou avec la carte, généralement grâce à un gestionnaire d'événements.

Pour créer votre commande personnalisée, quelques règles doivent être respectées. Les recommandations ci-dessous peuvent servir de meilleure pratique :

  • Définissez une feuille de style appropriée pour le ou les éléments de commande à afficher.
  • Gérez les interactions avec l'utilisateur ou avec la carte via des gestionnaires d'événements pour les modifications de propriété de carte ou les événements utilisateur (par exemple, les événements 'click').
  • Créez un élément <div> qui contiendra la commande et ajoutez cet élément à la propriété controls de Map.

Chacun de ces points est expliqué ci-après.

Créer des commandes personnalisées

Vous pouvez concevoir la commande comme vous le voulez. Nous recommandons généralement de placer toute la présentation de votre commande dans un seul élément <div> afin de pouvoir manipuler votre commande comme une seule unité. Nous utilisons ce modèle de conception dans les échantillons ci-dessous.

La conception de commandes esthétiques nécessite de connaître les structures CSS et DOM. Le code suivant montre comment une commande simple est créée à partir d'un <div> conteneur, d'un <div> comportant le contour du bouton et d'un autre <div> comportant l'intérieur du bouton.

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

Gestion des événements des commandes personnalisées

Pour qu'une commande soit utile, elle doit vraiment servir à quelque chose. À vous de choisir quelle sera son utilité. La commande peut répondre à une saisie de l'utilisateur ou à des modifications de l'état de Map.

Afin de répondre aux saisies des utilisateurs, Google Maps JavaScript API offre une méthode de gestion des événements multi-navigateur addDomListener() qui gère la plupart des événements DOM pris en charge du navigateur. L'extrait de code suivant ajoute un écouteur pour l'événement 'click' du navigateur. Notez que cet événement est reçu depuis le DOM, pas la carte.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

Positionner des commandes personnalisées

Les commandes personnalisées sont positionnées sur la carte en définissant leur emplacement approprié dans la propriété controls de l'objet Map. Cette propriété contient une série de positions google.maps.ControlPosition. Pour ajouter une commande personnalisée à la carte, ajoutez un Node (généralement <div>) à la position ControlPosition appropriée. (Pour plus d'informations sur ces positions, voir la section Positionner les commandes ci-dessus.)

Chaque ControlPosition stocke une table MVCArray de commandes affichées sur cette position. Ainsi, lorsque des commandes sont ajoutées ou supprimées de la position, l'API met à jour les commandes en conséquence.

L'API place les commandes à chaque position dans l'ordre d'une propriété index ; les commandes dont l'index est inférieur sont placées en premier. Par exemple, deux commandes personnalisées à la position BOTTOM_RIGHT seront disposées selon cet ordre, où les valeurs d'index inférieures priment. Par défaut, toutes les commandes personnalisées sont placées une fois que les commandes par défaut de l'API ont été placées. Vous pouvez annuler ce comportement en paramétrant une valeur négative de propriété index de la commande. Les commandes personnalisées ne peuvent pas être placées à gauche du logo ou à droite des copyrights.

Le code suivant crée une commande personnalisée (son constructeur n'est pas affiché) et l'ajoute à la carte à la position TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

Exemple de commande personnalisée

La commande suivante est simple (bien que pas particulièrement utile) et combine les modèles présentés ci-avant. Cette commande répond aux événements 'click' de DOM en centrant la carte à un certain point géographique par défaut :

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Voir l'exemple (control-custom.html).

Ajouter l'état aux commandes

Les commandes peuvent également stocker un état. L'exemple suivant est similaire à celui affiché ci-avant, mais la commande contient un bouton « Set Home » qui définit l'affichage d'un nouveau lieu d'accueil. Pour ce faire, une propriété home_ a été créée dans la commande afin de stocker cet état et fournit des accesseurs et des mutateurs (getters et setters) pour cet état.

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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;
}
#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}
 <!-- 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>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Voir l'exemple (control-custom-state.html).

Envoyer des commentaires concernant…

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