Migração: módulo do Google Maps em google.load

Em 13 de outubro de 2021, vamos desativar o serviço que fornece o módulo "Maps" para google.load. Isso significa que, depois de 13 de outubro de 2021, ao tentar usar o módulo "Maps" em google.load, você vai receber um erro (módulo "maps" incompatível) e não vai conseguir carregar nenhum mapa. Para evitar possíveis falhas, escolha uma das alternativas.

O que eu preciso fazer?

Primeiro, remova a tag <script> que usa o carregador google.load e, em seguida, exclua as chamadas para google.load. Se você estiver usando o Google Loader para outras finalidades, não há problema em manter a tag <script> do carregador.

Em seguida, implemente uma nova maneira de carregar a API Maps JavaScript. Selecione uma das seguintes opções:

Exemplo atual usando o Google Loader

O exemplo a seguir mostra como o Google Loader é usado atualmente para carregar a API Maps JavaScript (há dois blocos <script>):

Antes

<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>

Quando essa abordagem é usada, a API Maps JavaScript é carregada ao mesmo tempo que a página. Para implementar o carregamento inline, primeiro substitua a tag <script> que carrega www.google.com/jsapi ("antes") pela tag <script> mostrada no exemplo a seguir:

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

Em seguida, no código JavaScript, remova a chamada de função google.load, já que ela não é mais necessária. O exemplo a seguir mostra uma função initMap() em branco, que é chamada quando a biblioteca do Maps é carregada:

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

Consulte a documentação

Carregamento dinâmico de outro arquivo JavaScript

Com o carregamento dinâmico, você controla quando a API Maps JavaScript é carregada. Por exemplo, você pode aguardar para carregar a API Maps JavaScript até que o usuário clique em um botão ou realize outra ação. Para implementar o carregamento dinâmico, primeiro substitua a tag <script> que carrega www.google.com/jsapi ("antes") pelo código para adicionar de maneira programática a tag <script> mostrada no exemplo a seguir:

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;

Em seguida, anexe a função de callback ao objeto da janela da seguinte forma:

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

Por fim, adicione a tag <script> ao cabeçalho da página da seguinte forma:

document.head.appendChild(script);

Consulte a documentação