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

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

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

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

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

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

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

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

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

При использовании этого подхода Maps 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);

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