Migration: Module Maps dans google.load

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Le 13 octobre 2021, nous désactiverons le service qui fournit le module & quot; Maps pour google.load. Après le 13 octobre 2021, si vous essayez d'utiliser le module Maps dans google.load, vous obtiendrez une erreur (le module Maps n'est pas compatible) et aucune carte ne se chargera. Pour éviter toute interruption potentielle, vous devez passer à l'une des alternatives.

Que devez-vous faire ?

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

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

Exemple d'utilisation actuel du chargeur Google

L'exemple suivant montre comment le chargeur Google est utilisé actuellement pour charger l'API Maps JavaScript (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>

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 la balise <script> qui charge www.google.com/jsapi ("before") par la balise <script> indiquée 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, qui est appelée lorsque la bibliothèque Maps a été correctement chargée:

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

Consulter la documentation

Chargement dynamique à partir d'un autre fichier JavaScript

Le chargement dynamique vous permet de déterminer quand l'API Maps JavaScript est chargée. Par exemple, vous pouvez attendre de charger l'API Maps JavaScript jusqu'à ce que l'utilisateur clique sur un bouton ou effectue une autre action. Pour implémenter le chargement dynamique, remplacez d'abord la balise <script> qui charge www.google.com/jsapi ("before") par du code permettant d'ajouter par programmation la balise <script>, comme illustré 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 de fenêtre comme ceci:

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

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

document.head.appendChild(script);

Consulter la documentation