Яндекс карты в табах?

Question

[unlik]

Имеется такой скрипт https://jsfiddle.net/jyk6spc1/
Выводится карта и список геоточек

Хочу сделать 5 табов, в каждом табе свой город со своей картой и списком.
Как правильнее сделать? Что бы не сильно нагрузить страницу

Answer 1

[dom1n1k]

Ну если хочется, чтобы карты были действительно независимы (например, у каждой свой зум или стиль отображения), то придется таки делать 5 штук. Можно с ленивой загрузкой: https://tech.yandex.ru/maps/jsbox/2.1/request_map
Но мне кажется, что тут 5 карт не очень-то и нужны, вполне достаточно будет одной. И по клику на табе города прыгать в нужные координаты.

Comments

[unlik]

А как лучше в моем случае сделать, что бы при клике на таб подгружалось другие метки?

[dom1n1k]

Если меток суммарно не очень много (ориентировочно в пределах одной-двух сотен), можно вообще грузить все сразу - вывезет и так. Просто лишние не будут попадать во вьюпорт.
Если точек много, ну значит грузить точки для каждого города по мере их просмотра. А в чем проблема-то? По событию клика менять координаты карты, грузить аяксом json с данными и в цикле добавлять их на карту. Стандартными методами яндекс-карт, которые описаны в доке.
А можно даже без аякса, а данные подгрузить сразу пятью массивами. И на клик повесить уже только отрисовку.

Answer 2

[Чемодан Безруков]

Если 5 карт не устраивает, то делаете одну карту и кнопки с городами. Все объекты карты заносите в объект js. При нажатии на кнопку города, через АПИ карт выводите нужные метки, данные берете из объекта

Comments

[unlik]

Как правильнее в моем случае сделать, что бы при клике на кнопку менялись на карте точки?

[Чемодан Безруков]

Делал вот так, https://kraftway.ru/support/servisnaya-set/ (не реклама)

Вроде это очень похоже на Вашу задачу

[Чемодан Безруков]

unlik, начиная с 672 строчки

Answer 3

[Waydim]

https://zestinotire.club/contacts/
вот тут делал 2 карты - точек не много, но по сути нагрузка не большая