Менять Яндекс карты по клику

196

17 июля 2018, 16:10

Столкнулся с такой проблемой

$(document).ready(function(){ 
  main_map_change() 
 
  function main_map_change(){ 
    map_change_init() 
  } 
 
  function map_change_init(){ 
    var filial_box = $('body .filial') 
    var phil_box = filial_box.find('.phil_box') 
    phil_box.click(function(){ 
      var box = $(this) 
      var map_place = box.parent().parent().find('.map').empty() 
      var url = box.data('yamap') 
      var map_place = box.parent().parent().find('.map').append(url) 
    }) 
  } 
})

		.menu_big { 
			padding: 30px; 
		} 
		 
		.menu_big li { 
			padding: 5px; 
			list-style: none;  
		} 
 
		.menu_big li:hover { 
			border: 1px solid #666; 
			color: #231; 
			cursor: pointer;  
		} 
 
		.phil_box { 
			height: 197px; 
			cursor: pointer; 
	    padding-left: 26px; 
	    padding-right: 40px; 
		} 
 
		.phil_box:hover { 
	    border: 1px solid #000; 
	  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Maps</title> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
	<div class="filial" style="float: left;"> 
		<div class="phil_box" data-yamap='<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=cPWEOzA4Hpgbn17ztTMn46QZLXobIg8T&width=995&height=547&lang=ru_RU&sourceType=constructor&scroll=true"></script>'> 
			<div class="name"> 
				Белгород 
			</div> 
		</div> 
		<div class="phil_box" data-yamap='<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=Sg7-mSHkmd3qKlL8hbhuJSR90DmQu__f&width=995&height=547&lang=ru_RU&sourceType=constructor&scroll=true"></script>'> 
			<div class="name"> 
				Владивосток 
			</div> 
		</div> 
		<div class="phil_box" data-yamap='<script type= "text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=XuQ1P--bFJHSB73eUoznaG7YJjeUnp1a&width=995&height=547&lang=ru_RU&sourceType=constructor&scroll=true"></script>'> 
			<div class="name"> 
				Казань 
			</div> 
		</div> 
		<div class="phil_box" data-yamap='<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=g0S5kzcCvtjPiteK0n5lm9Ifhffz8JRd&width=995&height=547&lang=ru_RU&sourceType=constructor&scroll=true"></script>'> 
			<div class="name"> 
				Иркутск 
			</div> 
		</div> 
	</div> 
	<div class="map" style="float: right; width: 995px; height: 547px; background-color: #666;"> 
 
	</div> 
</body> 
</html>

Есть код, по клику надо менять карты, но выдает ошибку script element was removed from document. Можно ли это как-то исправить?