Перенос модуля Maps в google.load

13 октября 2021 г. мы отключим сервис, предоставляющий модуль «Карты» для google.load . Это означает, что после 13 октября 2021 года при попытке использовать модуль «Карты» в google.load вы получите сообщение об ошибке ( модуль «карты» не поддерживается ), и никакая карта не загрузится. Чтобы избежать потенциальной поломки, необходимо переключиться на один из альтернатив.

Что мне нужно сделать?

Сначала удалите тег <script> , который загружает загрузчик google.load , затем удалите вызовы google.load . Если вы используете Google Loader для других целей, можно оставить тег <script> загрузчика на месте.

Затем реализуйте новый способ загрузки Maps JavaScript API (выберите один из следующих вариантов):

Текущий пример с использованием Google Loader

В следующем примере показано, как в настоящее время используется загрузчик Google для загрузки Maps JavaScript API (есть два блока <script> ):

До 

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

При использовании этого подхода API JavaScript Карт загружается одновременно с загрузкой страницы. Чтобы реализовать встроенную загрузку, сначала замените тег <script> , который загружает www.google.com/jsapi ( «before» ), на тег <script> , показанный в следующем примере:

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

Затем в вашем коде JavaScript удалите вызов функции google.load , поскольку он больше не нужен. В следующем примере показана пустая функция initMap() , которая вызывается после успешной загрузки библиотеки Maps:

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

См. документацию

Динамическая загрузка из другого файла JavaScript

Динамическая загрузка позволяет контролировать загрузку Maps JavaScript API. Например, вы можете подождать загрузки Maps JavaScript API, пока пользователь не нажмет кнопку или не выполнит другое действие. Чтобы реализовать динамическую загрузку, сначала замените тег <script> , загружающий www.google.com/jsapi ( «before» ), кодом для программного добавления тега <script> , как показано в следующем примере:

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;

Затем прикрепите функцию обратного вызова к объекту окна следующим образом:

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

Наконец, добавьте тег <script> в заголовок страницы следующим образом:

document.head.appendChild(script);

См. документацию