Migration : module Maps dans google.load

Le 13 octobre 2021, nous avons désactivé le service qui fournissait le module Maps pour google.load. Depuis le 13 octobre 2021, si vous essayez d'utiliser le module Maps dans google.load, vous recevez un message d'erreur indiquant que le module Maps n'est pas pris en charge, et aucune carte ne se charge. Pour éviter toute interruption potentielle, vous devez utiliser l'une des autres possibilités.

Que dois-je faire ?

Commencez par supprimer le tag <script> qui déclenche le chargeur google.load, puis supprimez les appels à google.load. Si vous utilisez Google Loader pour d'autres tâches, vous pouvez conserver le tag <script> du chargeur.

Ensuite, implémentez une nouvelle méthode pour charger l'API Maps JavaScript (choisissez l'une des options suivantes) :

• Chargement intégré à l'aide du tag <script>
• Chargement dynamique à partir d'un autre fichier JavaScript

Exemple actuel d'utilisation de Google Loader

L'exemple suivant montre comment Google Loader était précédemment utilisé pour charger l'API Maps JavaScript (il y a deux blocs <script>) :

Avant

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Chargement intégré à l'aide du tag <script> (recommandé)

Lorsque cette approche est utilisée, l'API Maps JavaScript se charge en même temps que la page. Pour implémenter le chargement intégré, remplacez d'abord le tag <script> qui chargeait www.google.com/jsapi (avant) par le tag <script> comme indiqué dans l'exemple suivant :

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

Supprimez ensuite l'appel de fonction google.load dans votre code JavaScript, car il n'est plus nécessaire. L'exemple suivant montre une fonction initMap() vide, appelée lorsque la bibliothèque Maps a bien été chargée :

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Voir la documentation

Chargement dynamique à partir d'un autre fichier JavaScript

Le chargement dynamique vous permet de contrôler quand l'API Maps JavaScript est chargée. Par exemple, vous pouvez attendre que l'utilisateur clique sur un bouton ou effectue une autre action pour charger l'API Maps JavaScript. Pour implémenter le chargement dynamique, remplacez d'abord le tag <script> qui chargeait www.google.com/jsapi (avant) par du code qui ajoute le tag <script> programmatiquement comme indiqué dans l'exemple suivant :

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

Ensuite, associez votre fonction de rappel à l'objet window comme ceci :

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

Enfin, ajoutez le tag <script> à l'en-tête de la page comme suit :

document.head.appendChild(script);

Voir la documentation