私は現在、ウェブサイトの小さな機能に取り組んでいます。基本的には、ページに港の地図を表示し、ユーザーがルートを見つけるためにその下に住所を入力できるようにします。道順を取得するリンクをクリックすると、ファンシーボックスが開き、コンテンツはGoogleのdirectionsPanelを含むdivになります。
これが私が直面している問題です。-calcRoute（）関数は、リンクのonClickで呼び出されます。したがって、divは以前に入力されていません。結果？最初にクリックすると、ファンシーボックスは空を生成します。2番目にそれはそれが想定されているように生成します。私が思いついた解決策の1つは、divのサイズを手動で設定することです。ただし、これにより、スクロールとスタイリングの問題が発生します。
これが私のコードです（これは、実際のサイトに移植する前にコードをテストするために作成した小さなページです）：
<script type="text/javascript">
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var manhattanPort = new google.maps.LatLng(40.767899, -73.995825);
var myHouse = new google.maps.LatLng(40.419866, -74.152263);
var geoCoder;
function initialize() {
geoCoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: manhattanPort,
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute(){
var address = document.getElementById("address").value;
var end = manhattanPort;
var request = {
origin: address,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
geoCoder.geocode( {'address':address}, function(results,status){
if(status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
} else{
alert("Geocode was not succesful for the following reason: " + status);
}
});
directionsService.route(request, function(result, status){
if( status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);
}
});
}
function doClear(theText){
if (theText.value == theText.defaultValue){
theText.value = ""
}
}
</script>
</head>
<body onload="initialize()">
<table align="right">
<tr>
<td align="right" width="330" height="380">
<div id="map_canvas" style="width:100%; height:100%"></div>
</td>
</t
</table>
<table align="center">
<tr>
<td align="center">
<div>
<input name="start_address" id="address" type="text" value="Enter An Address To Get Directions" onFocus="doClear(this)" size="100"/>
<!-- <input type="button" value="Get Directions" onClick="calcRoute();"/> -->
<a class="fancybox" href="#directionsPanel" onClick="calcRoute();">Get Directions</a>
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="directionsPanel"></div>
</td>
</tr>
</table>
</body>
</html>
今は明らかに、fancybox自体のスクリプトがありません。それらを提供することが役立つかどうか私に知らせてください。
助けてくれてありがとう！