javascript タブ切り替え中でheight-line，谷歌地图を使う

Posted 2021-05-04

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBS639bUIkoxEkf1iY9LrUjnxpkVNoJvuE"></script>
<script type="text/javascript" src="js/googlemap.js"></script>
<script type="text/javascript" src="js/settingPoint.js"></script>
<script type="text/javascript" src="js/settingMaps.js"></script>
<script>
	$(function(){
		var $tab = $('#tab'),
		$li = $tab.find('li'),
		$select = $tab.find('select');

		$li.click(function(){
			var target = $(this).attr('data-target');
			if($(target).is(':hidden')) {
				$(target).fadeIn(300).siblings().hide();
				$(this).addClass('active').siblings().removeClass('active');
				$select.val(target);
			}
			maps.setMap();
			var $match01 = $('.a02 .box_ssg').find('.txt');
			var $match02 = $('.a04 .box_ssg').find('.txt');
			//関数の実行
			matchHeight($match01,(abi.pc) ? 3 : (abi.tab) ? 2 : 1); //三項演算子で幅毎の引数を指定
			matchHeight($match02,(abi.pc) ? 3 : (abi.tab) ? 2 : 1); //三項演算子で幅毎の引数を指定
		});
		$select
		.prop('selectIndex',1)
		.change(function(){
			var i = $(this).prop('selectedIndex');
			$li.eq(i).trigger('click');
		});
	});
</script>
<script>
//関数の定義 matchHeight(高さを揃えたい要素,何個ずつ揃えるか)
function matchHeight($o,m) {
	$o.css('height','auto')
	var foo_length = $o.length;

	for(var i = 0 ; i < Math.ceil(foo_length / m) ; i++) {
		var maxHeight = 0;
		for(var j = 0; j < m; j++){
			if ($o.eq(i * m + j).height() > maxHeight) {
				maxHeight = $o.eq(i * m + j).height();
			}
		}
		for(var k = 0; k < m; k++){
			$o.eq(i * m + k).height(maxHeight);
		}
	}
}
</script>

//マップはsettingMaps.jsの下記から持ってくる。
// 実行
maps = new googlemap();
window.onload = function() {
  maps.setMap();
}

//※マップはハイとラインの関数とは違いsettingMaps.jsに残しておいても大丈夫そう(おかしければ消す)