私は Google Maps API v.3 を使用して、Googleによるこの例と非常によく似た道順で Google マップを作成しています。
主な違いは、ページの読み込み時に Google マップ キャンバスが 100% に設定され、ユーザーがルート案内を要求するとマップが 70% に縮小されることです (ルート案内パネル用のスペースを確保するため)。
ユーザーがルート案内を取得すると、マップ キャンバスが 70% ではなく 100% であるかのようにルート案内が表示され、基本的にルート案内の一部が切り取られます。方向応答が表示されているときに、マップの向きを変更/中心合わせする必要があります。
こちらでデモを行うことができます: http://j2designpartnership.com/directions/
ユーザーがルートを入力すると、次の関数が呼び出されます。 calcRoute()
function calcRoute() {
if (document.getElementById("start").value != "") {
activeSettings();
}
else{
defaultSettings();
}
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
//make the request for our directions
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
var recenter = new google.maps.LatLng(40.440625,-79.995886);
map.setCenter(recenter);
}
ここで注目したいのは、基本的に入力欄にテキストがあれば地図キャンバスの幅を変える一番上の条件です。
マップ キャンバスが小さくなったので、マップを中心に戻すにはどうすればよいですか?