0

Хочу реализовать на сайте страницу точки продаж: сверху высокий блок с Гугл (Яндекс) картой, под ним 3 коротких блока в колонку с описанием конкретных магазинов. в каждом из описании есть кнопка "показать адрес".

  1. как реализовать по нажатию на эту кнопку смену встраиваемой карты? (не обязательно на примере карты, в примере прикрепил код, подчеркну, задача в том, чтобы при нажатии на кнопку изменялся сам блок, а не его цвет)

  2. отдельно буду признателен, если реализация подойдёт для n-ого количества магазинов, т.е. автоматически будет высчитываться порядковый номер кнопки и относительно него будет отображаться контент в блоке. введите сюда описание изображения

.shop {
width: 100%;
height: 100px;
color: #fff;
}

.shop-1 {
background: red;
}

.shop-2 {
background: blue;
}

.shop-3 {
background: yellow;
}
<div class="shop shop-1">1</div>
<div class="shop shop-2">2</div>
<div class="shop shop-3">3</div>
<button class="shop__btn shop__btn-1">показать 1</button>
<button class="shop__btn shop__btn-2">показать 2</button>
<button class="shop__btn shop__btn-3">показать 3</button>

1
  • Вы явно описываете то, что нужно делать на JS 6 ноя 2022 в 10:22

1 ответ 1

1

1)Вам не надо 3 блока <div class="shop shop-n"></div> достаточно одного, в котором в зависимости от нажатой кнопки будет загружаться нужный адресс.

2)Кнопки лучше делать обезличеными, например <button type="button" class="shop__btn" data-map="0">показать 1</button>

3)Дальше пишете код подгрузки 'iframe' карты. У гугла они платный, и нуждаються в подключении API ключа()

4)После того как добьетесь того что карта у вас уже показываеться(хоть какая-то), просто создаете массив из переменных, в которых храняться координаты магазинов, и тогда в зависимости от data-map кнопки заменяете iframe в нужном блоке. data-map => индекс в массиве

2
  • я только начал учить js, был бы очень благодарен, если бы вы на этом примере подсказали мне, как это реализовать в виде кода. а то нагуглить не получается:) в остальном спасибо большое за ответ - логику предельно ясно расписали! 6 ноя 2022 в 19:44
  • youtube.com/watch?v=AgwhiHLu2H4 Материала полно. Это слишком заезженая тема. На каждом 1-ом магазине вставляют карту маршрута. Программирование - это в первую очередь поиск информации. Ну или 50$ и за вас этот код готовы написать. 6 ноя 2022 в 20:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.