同じ場所にmapを表示、ボタンクリックで地図を切り替えたい

Question

googlemapを表示させたいのですが、うまくいきません。

２つの地図を１つの場所に配置し、ボタンクリックで表示を切り替えたくて、下記のとおり作成しました。

<!--html-->
<div class="access">
<h2>所在・MAP</h2>
</div>
<hr>

<div class="shozaichi">
 <h3>所在地</h3>
    <div class="cal">
    <p><span class="calname">会社１</p>
       <div class="map1">
    <p>MAP</p>
    </div>
    </div>
    <div class="chf">
	<p><span class="chfname">会社２</p>
        <div class="map2">
        <p>MAP</p>
    </div>
   </div>
</div>


<div id="map">
<p>拠点・MAP</p>
<div id="cal_map">
  <!--<p class="mapinfo">会社１</p>-->
  <div id="map_canvas_01"></div>
  
  <div class="access_01">
    <p class="com">会社1</p>
    <p class="add">住所</p><br /><br />
    <p class="text">【アクセス】</p> 
  </div>
</div>
<!--<p class="mapinfo">会社２</p>-->
<div id="chf_map">
  <div id="map_canvas_02"></div>
  
  <div class="access_02">
    <p class="com">会社２ </p>
    <p class="add">住所</p> <br /> <br />
    <p class="text">【アクセス】</p>
  </div>
</div>

</div><!--#map-->



<script type="text/javascript">
  (function(){
    var latlng = new google.maps.LatLng(35.682139, 139.768782);
    var myOptions = {
        zoom: 15
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("map_canvas_01")
      , myOptions
    );
    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_01
    });


    var latlng = new google.maps.LatLng(35.857416, 139.309805);
    var myOptions = {
        zoom: 15
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_02 = new google.maps.Map(
        document.getElementById("map_canvas_02")
      , myOptions
    );
    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_02
    });

  }());
		  </script>
  
  
 <script type="text/javascript"> 
$(function() {
    $('.map1').click(function(){
        $('#cal_map').show();
		$('#chf_map').hide();

    });
	google.maps.event.trigger( map, "resize" ) ;
});

  
$(function() {
    $('.map2').click(function(){
        $('#chf_map').show();
		$('#cal_map').hide();

    });
	google.maps.event.trigger( map, "resize" ) ;
});
  </script>

<!--css-->
 .access h2{
	clear: both;
	line-height: 120px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 4px;
}
 .shozaichi{
	height:200px;
	text-align:center;
	margin-bottom:50px;
}
 .shozaichi h3{
	font-size:20px;

	font-weight:bold;
	letter-spacing:2px;
}
 .shozaichi .cal{
	height:45px;
	display:flex;
	text-align:left;
	font-size:16px;
	line-height:27px;
	position:relative;
	margin-bottom:30px;
	}
 .shozaichi .cal .calname{
	display: inline-block;
	width: 18em;
	}
 .shozaichi .cal .map1{
	line-height:16px;
	letter-spacing:1px;
	font-size:12px;
	display:block;
	color:#fff;
	background-color:#000;
	padding-left:4px;
	padding-right:4px;
	margin-right:50px;
	position:absolute;
	right:0;
	bottom:25px;
	cursor:pointer;
}

 .shozaichi .chf{
	height:45px;
	display:flex;
	text-align:left;
	font-size:16px;
	line-height:27px;
	position:relative;
	margin-bottom:30px;
	}
 .shozaichi .chf .chfname{
	display: inline-block;
	width: 18em;
	}

 .shozaichi .chf .map2{
	line-height:16px;
	letter-spacing:1px;
	font-size:12px;
	display:block;
	color:#fff;
	background-color:#000;
	padding-left:4px;
	padding-right:4px;
	margin-right:50px;
	position:absolute;
	right:0;
	bottom:25px;
	cursor:pointer;
}

  #map{
	text-align:center;
	height:1200px;
	position:relative;
}	
  #map #map_canvas_01{
	position:absolute;
	top:180px;
	left:50px;
	width:840px;
	height:410px;
	margin:0px auto 50px;

	}
 #map .access_01{
	position:absolute;
	top:590px;
	left:50px;
	width:760px;
	height:220px;
	margin:0px auto 50px;
	background-color:#fff;
	text-align:left;
	padding:30px 40px;

	}
 #map .access_01 .com{
	font-size:16px;
	line-height:27px;
	font-weight:bold;
}
 #map .access_01 .add{
	font-size:14px;
	line-height:27px;
	font-weight:normal;

}
 #map .access_01 .text{
	font-size:14px;
	line-height:27px;
	font-weight:normal;

}

  #map #chf_map{
	display:none;
}

  #map #map_canvas_02{
	position:absolute;
	top:180px;
	left:50px;
	width:840px;
	height:410px;
	margin:auto;
	
	}
  .access_02{
	position:absolute;
	top:590px;
	left:50px;
	width:760px;
	height:220px;
	margin:0px auto 50px;
	background-color:#fff;
	text-align:left;
	padding:30px 40px;
	
	
	}
 #map .access_02 .com{
	font-size:16px;
	line-height:27px;
	font-weight:bold;
}
 #map .access_02 .add{
	font-size:14px;
	line-height:27px;
	font-weight:normal;

}
 #map .access_02 .text{
	font-size:14px;
	line-height:27px;
	font-weight:normal;

}

基本はmap１を表示していて、ボタン２を押すとmap２に切り替わる、またボタン１を押すとmap1に戻る、
というように表示したいのですが、ボタン２を押すとmapが表示されず、画面を縮小、拡大するとなぜか表示されます。

このような場合、どのようにしたらよろしいのでしょうか？
教えてください。どうぞよろしくお願いいたします。

Answer 1

たぶん、2個めの地図が最初からdisplay:noneになっているからではないでしょうか？
画面のロード時に非表示になっていると地図がうまく読み込まれないようです。
地図を読み込んでから非表示にするようにしたら直るかもしれません

display:noneの要素にGoogle Mapsを貼り付ける

Comments

[r110]

ご回答ありがとうございます！
display:noneを消し、１個目の地図をz-index:2にして上に表示したらうまくいきました！！！
急いでいたのでとても助かりました！！本当にありがとうございました。

Answer 2

resizeを実行すればどうでしょう。

【resize - 地図のリフレッシュを実行した時に発火するイベント】
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/resize/

google.maps.event.trigger( map, "resize" ) ;

Comments

[r110]

ご回答いただきありがとうございます！
教えていただいたコードを入れても、表示は変わりませんでした。
http://smartinfo.calneco.jp/about/access.html

こちらテストサイトなのですが、二つ目のmapボタンを押しても、表示されません。
どうしたらよろしいでしょうか？
教えていただけるとありがたいです。よろしくお願いいたします。

[kei344]

とりあえず質問文にその近辺も含めたコードを提示されてはいかがでしょう。質問文は編集可能ですし、コードの全容が書かれているほうが回答しやすいと思います。

[r110]

ご回答ありがとうございます。
コードを編集しました。こちらでいかがでしょうか？
また、他にいいコードの入力かたなどあれば教えてください。
よろしくお願いいたします。

Answer 3

showとhideに指定しているidが間違っていませんか？
HTML上には下記のidが見受けられません。

 $('#map1').show();
 $('#map2').hide();

Comments

[r110]

ご回答ありがとうございます。
すみません、先ほど記載した質問文を誤って記載していました。
$('#map1').show();
$('#map2').hide();
と記載しても、同じような状況です。どうしたらよろしいでしょうか？