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 that you have read and understand our privacy policy and code of conduct.

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