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

13 октября 2021 г. мы отключили сервис, предоставляющий модуль Maps для google.load. Начиная с этой даты при попытке использования модуля Maps в 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 (вариант "до"), тегом <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. Например, вы можете отложить загрузку, пока пользователь не нажмет кнопку или не выполнит другое действие. Чтобы реализовать динамическую загрузку, сначала замените тег <script>, загружающий www.google.com/jsapi (вариант "до"), кодом для программного добавления тега <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);

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