2
表示/非表示機能を使用してGmaps google mapsプラグインを表示していますが、onclickが実行されたときGmapが表示されています。表示/非表示Gmap表示時に部分的にグレー表示
さまざまなサイトでソリューションを探していましたが、「gmap.checkResize（）」を使用するオプションが見つかりましたが、これを自分のコードで使用する方法がわからず、私の問題...
私は以下のコードを追加し、オンチック時に地図全体を表示するのを手伝っています。
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script>
</head>
<style>
#map{
position:relative;
float:left;
width:450px;
height:400px;
}
.PlaceHeading{
color: #C6688D;
font-family: Arial;
font-size: 15px;
margin-bottom:-13px;
}
#content{
text-align:center;
}
a{
color: #C6688D;
}
.PlaceAddress{
color: #666666;
font-family: Arial,Georgia,sans-serif;
font-size: 12px;
font-weight: normal;
}
</style>
<script type="text/javascript">
$(function() {
$("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta",
html:'<div id="content"><center>'+
'<h1 class="PlaceHeading">Blue Star Diner</h1>'+ //*Title of location
'<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location
'Calgary, AB <br />'+ //*City and Province of location
'403-261-9998 <br/>'+ //*Phone number of location
'<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">' //*Enter Address info in url where appropriate to link to Google directions page
+'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here
'Visit website </a> </p></center>' +
'</div>',
icon: { image: "mapPage/images/marker1.png",
iconsize: [25, 41],
iconanchor: [9, 34],
infowindowanchor: [9, 2] }
}],
zoom: 13 });
});
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.getElementById("expandMap").src="mapPage/images/minus.jpg";
document.getElementById("mapText").innerHTML="Hide map";
}
else
{
document.getElementById(divId).style.display = 'none';
document.getElementById("expandMap").src="mapPage/images/plus.jpg";
document.getElementById("mapText").innerHTML="View map";
}
}
</script>
<body>
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div id="map"> </div>
</div>