Перенос модуля 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() , которая вызывается после успешной загрузки библиотеки 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);

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