Я работаю над веб-сайтом: MetroCRE и пытаюсь использовать интеграцию с Google Maps с расширенными настраиваемыми полями.
Теперь карта работает, однако из-за конкретных потребностей клиентов, они хотят ее в одном месте на мобильном устройстве и в пределах выбора вкладки, которая существует на рабочем столе.
Однако невозможно дважды загрузить поле Google Map на той же странице.
На мобильном устройстве карта работает или изменяет размер браузера, что сделает ее загруженной, но при загрузке страницы она не будет >= 768px
Кто-нибудь знает, как пройти мимо этого?
Поскольку карта начинает работать после изменения размера …
С сайта ACF .
Решение проблемы скрытой карты
API карты Google не будет работать, как ожидалось, если инициализируется скрытым элементом. Когда элемент отображается, карта не будет отображаться. Этот сценарий наиболее вероятен при использовании всплывающего модального.
Чтобы решить эту проблему, просто вызовите событие «изменить размер» в переменной карты после того, как элемент карты будет виден.
// popup is shown and map is not visible google.maps.event.trigger(map, 'resize');
Поэтому я бы добавил событие, когда вы нажимаете вкладку Карта, чтобы вызвать изменение размера. Поместите код в acf_google-map.js в конце
$(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); $('#map-tab').click(function () { google.maps.event.trigger(map, 'resize'); }); });
РЕДАКТИРОВАТЬ:
Поскольку вкладки исчезают в анимации, добавьте задержку в триггер изменения размера
$('#map-tab').click(function () { setTimeout(function() { google.maps.event.trigger(map, 'resize'); }, 200); });
Хотя это не лучший способ, я нашел решение своей проблемы здесь .
Оказывается, добавление CSS для отображения обеих вкладок, но отключение их от страницы приведет к тому, что он будет работать как google.maps.event.trigger(map, 'resize'); не будет работать при активации вкладок.
Ниже приведен CSS, который я использовал, чтобы заставить его работать. Хорошо работает для реагирования.
.tab-pane { display: block !important; position: fixed; right: -9999px; width: 100%; } .tab-pane.active { position: relative; left: 0; }
Если у кого-то есть решение, отличное от CSS, пожалуйста, сообщите мне, что вышеупомянутый ответ TheDrot не работал для меня.