Как проверить есть ли необходимость загрузки google maps на странице?

Question

[ligisayan]

Всем привет!

Есть динамически подгружаемая гугл карта, которая нужна только на странице контактов, а скрипт у меня подключен на всех страницах единый. При переходах по страницам периодически получаю такую ошибку:

You have included the Google Maps API multiple times on this page,

а если подключение скрипта maps.googleapis.com вывожу только на страницу контактов, то ошибка уже

google is not defined

,
хотя и в первом и во втором случае сама карта подгружается.

Как избавиться от ошибок?

<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
<div id="w3docs-map"></div>

function initialize() {
  var prop = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("w3docs-map"), prop);
}
google.maps.event.addDomListener(window, 'load', initialize);

#w3docs-map {
  width:500px;
  height:380px;
}

Comments

[Andrew]

You have included the Google Maps API multiple times on this page,

Очевидно, проверить где подключается и оставить только в основном.
И если нужно сделать init динамически - написать функцию которая будет это делать, для конкретного экземпляра карты. (оставить её в основом js-е)

[ligisayan]

Andrew, сорри, сам код не написал в вопрос. Поправил.
В чем здесь причина ошибки?

[Andrew]

ligisayan, у вас одна и таже карта на всех страницах(id у её контейнера один и тотже)?

[ligisayan]

Andrew, да. карта нужна только на одной странице

Answer 1

[Andrew]

function initialize() {
var _map = document.getElementById("w3docs-map");
if(!_map.firstChild){
  var prop = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(_map, prop);
}
}

Comments

[ligisayan]

Andrew понял вашу задумку! Буду пробовать

[Andrew]

ligisayan, но этот коммент говорит

You have included the Google Maps API multiple times on this page,

Что у вас api в нескольких местах подключается.
Совет: чтобы не пилить условия, сделайте отдельный блок с подключением карты и импортьте его, проверяя если его нет. Не знаю что вы используете(cms?) поэтому не могу сказать как это сделать точно

[ligisayan]

Andrew, да, используется wordpress для вывода карты в админке использую поле acf и на фронте тоже подключаю скрипт для вывода

Answer 2

[ligisayan]

Ошибку

google is not defined

исключил, когда убрал в скрипте гугл карты async а оставил только defer