There is such a code, do not pay attention to the large volume, the essence of the question is simply how to make the map change depending on the options, so far it turns out to make only one change to all options

$('#select-town').on('change', function () { var value = $(this).val(); $('.map-local-block iframe').attr('src','https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d255987.65219667164!2d30.044878901459896!3d59.9171483236945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696378cc74a65ed%3A0x6dc7673fab848eff!2z0KHQsNC90LrRgi3Qn9C10YLQtdGA0LHRg9GA0LM!5e0!3m2!1sru!2sru!4v1484834565398'); $('.select-addres').attr('hidden', 'true'); $('#' + value).removeAttr('hidden'); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="flag-block "> <img src="/local/templates/empty/img/rus.jpg" alt="flag"> <a href="#" class="rus-flag active-flag">Россия</a> <img src="/local/templates/empty/img/kazah.jpg" alt="flag"> <a href="#" class="kazah-flag">Казахстан</a> </div> </div> <div class="col-lg-12 col-wrap "> <div class="col-lg-8 col-sm-8 col-none-two"> <div class="map-local-block "> <iframe src="https://www.google.com/maps/d/embed?mid=1OdegHwbyqFMmzLeMvSth-_h2IEE&hl=ru" width="100%" height="540" style='border: none;'></iframe> </div> </div> <div class="col-lg-4 scroll-block col-sm-4"> <div class="col-lg-12"> <div class='select-block'> <select name="City-scroll" id="select-town"> <option value="tolyati" >Тольятти</option> <option value="moscow" selected>Москва</option> <option value="piter" id='piter-options'>Санкт-Петербург</option> <option value="perm">Перьм</option> </select> </div> </div> </div> <div class="col-lg-4 scroll-block col-sm-4 scroll-block-two" style='padding-left: 5px; padding-right: 5px;'> <div class="col-lg-12"> <div class="scroll-block_adress "> <div class="adress-text_block"> <div class="top_name"> <a href="#" >ООО «Эстетика»</a> </div> </div> <div class="tel_and_street"> <span>ул. Мечникова, 12.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ООО «Академия эстетики»</a> </div> </div> <div class="tel_and_street"> <span>ул. Московская, 101.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ИП Ривзанова Р. Х.</a> </div> </div> <div class="tel_and_street"> <span>ул. Центральная, 55.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress "> <div class="adress-text_block"> <div class="top_name"> <a href="#" >ООО «Эстетика»</a> </div> </div> <div class="tel_and_street"> <span>ул. Мечникова, 12.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="select-addres" hidden id="moscow"> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#" >ООО «Эстетика» москва</a> </div> </div> <div class="tel_and_street"> <span>ул. Мечникова, 12.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ООО «Академия эстетики»</a> </div> </div> <div class="tel_and_street"> <span>ул. Московская, 101.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ИП Ривзанова Р. Х.</a> </div> </div> <div class="tel_and_street"> <span>ул. Центральная, 55.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> </div> <div class="select-addres" hidden id="piter"> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#" >ООО «Эстетика» питер</a> </div> </div> <div class="tel_and_street"> <span>ул. Мечникова, 12.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ООО «Академия эстетики»</a> </div> </div> <div class="tel_and_street"> <span>ул. Московская, 101.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ИП Ривзанова Р. Х.</a> </div> </div> <div class="tel_and_street"> <span>ул. Центральная, 55.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> </div> <div class="select-addres" hidden id="perm"> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#" >ООО «Эстетика» пермь</a> </div> </div> <div class="tel_and_street"> <span>ул. Мечникова, 12.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ООО «Академия эстетики»</a> </div> </div> <div class="tel_and_street"> <span>ул. Московская, 101.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> <div class="col-lg-12"> <div class="scroll-block_adress"> <div class="adress-text_block"> <div class="top_name"> <a href="#">ИП Ривзанова Р. Х.</a> </div> </div> <div class="tel_and_street"> <span>ул. Центральная, 55.</span> <br> <span>+7 (8412) 26-04-05</span> <br> <span>+7 (8412) 30-43-46</span> <br></div> <div class="giper_bottom"> <a href="#">www.mango-s.ru</a> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-8 col-none col-xs-12"> <div class="map-local-block "> <iframe src="https://api-maps.yandex.ru/frame/v1/-/CZTARU4W" width="100%" height="690" frameborder="0"></iframe> </div> </div> </div> </section>

    1 answer 1

    To do this, you need to have the key to connect your website to the Google Maps service.

     https://www.google.com/maps/embed/v1/place?key=AIzaSyCJop1zi8WAqUt-5gCigUmPXAcqNgu5H-8&q=

    In the code, we add a parameter from the select to "q"

     $('#select-town').on('change', function () { var value = $(this).val(); $('.map-local-block iframe').attr('src','https://www.google.com/maps/embed/v1/place?key=AIzaSyCJop1zi8WAqUt-5gCigUmPXAcqNgu5H-8&q='+ value); $('.select-addres').attr('hidden', 'true'); $('#' + value).removeAttr('hidden'); })