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

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

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

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

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

• Встроенная загрузка с помощью тега <script>
• Динамическая загрузка из другого файла JavaScript.

Пример использования Google Loader.

В следующем примере показано, как в настоящее время используется Google Loader для загрузки 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>

Встроенная загрузка с использованием тега <script> (рекомендуется)

При таком подходе JavaScript API карт загружается одновременно с загрузкой страницы. Для реализации встроенной загрузки сначала замените тег <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() , которая вызывается после успешной загрузки библиотеки карт:

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

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

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

Динамическая загрузка позволяет контролировать момент загрузки JavaScript API карт. Например, вы можете подождать с загрузкой 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 следующим образом:

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

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

document.head.appendChild(script);

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