Как сделать карту зависимой от options

311

21 января 2017, 13:30

Есть такой код, не обращайте внимания большой объем, суть вопроса просто , как сделать чтобы карта менялась зависимо от options , пока получается сделать только одно изменение на все 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>

Answer 1

Для этого вам надо иметь ключь, для подключения своего сайта к сервису гугл мапс.

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

В коде добавляем параметер из селекта в "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');
})

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать но с JSON форматом?

Если просто вывести результат (без ajax) то работают ссылки как надо, а если я использую ajax json то получаю такой эффект что не работают ссылки...

252

javascript

Chrome extension inject content script

Добрый деньПрежде не сталкивался с Chrome Extensions, но нужно на скорую руку накидать скелет расширения с функционалом примерным Greasemonkey (на том...

401

javascript