Загрузить ту же карту ACF дважды на той же странице

Я работаю на веб-сайте: MetroCRE и пытаюсь использовать интеграцию с Google Maps с расширенными пользовательскими полями.Загрузить ту же карту ACF дважды на той же странице

Теперь карта работает, однако из-за конкретных потребностей клиентов, они хотят ее в одном месте на мобильном устройстве и в пределах выбора вкладки, которая существует на рабочем столе.

Однако на одной странице не удается загрузить поле Google Map дважды.

На мобильных устройствах, карта работает, или изменение размера браузера на всех сделает его загрузки, но при загрузке страницы будет не >= 768px

Кто-нибудь знает какой-либо способ обойти это?

источник

2016-06-14 Ishio

Вы уверены, что карта работает? Потому что, когда я проверил его, он отображает пустую карту. – TheDrot

Если вы посмотрите на мобильный или измените размер страницы, он загрузится. – Ishio

Поскольку карта начинает работать после того, как изменить размер ...

От ACF Website.

Решая скрытой картой Выпуск

Карта 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'); 
    }); 

});

EDIT:

Поскольку вкладки исчезают там анимация так поставить задержку в триггер изменения размера

$('#map-tab').click(function() { 
    setTimeout(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }, 200); 
});

источник

2016-06-15 00:45:14 TheDrot

Я разместил код [здесь.] (Https://codeshare.io/sn81f) Я попытался реализовать ваше предложение, но все же, когда я нажимаю на код, он не работает. – Ishio

@Ishio Да, это не работает, потому что вы не помещаете его в нужное место. Вы должны поместить код в файл acf_google-map.js в конце после '$ ('. Acf-map'). Each (function()'. Посмотрите на обновленный ответ. – TheDrot

@Ishio Причина, по которой он не работает где-нибудь еще, потому что переменная 'map' существует только в том, что она сама выполняет функцию.Если вы пытаетесь использовать где-либо еще, он просто захватывает HTML-элемент с идентификатором 'map' и, конечно же, ничего не делает для обновления карты google. – TheDrot

Хотя не лучший способ для этого я нашел решение своей проблемы here.

Отключает добавление 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 не работает для меня.

источник

2016-06-15 12:59:33 Ishio

Загрузить ту же карту ACF дважды на той же странице

ответ

Смежные вопросы