Google maps javascript：ハーフマップのルートを表示

Question

私はバックグラウンドでGoogleマップを表示し、ページの左半分にフォームを表示し、右半分に要求されたルートを表示する必要があるウェブページで作業しています。 Googleマップがページの100％の幅をカバーすることをご存じですか？ここでは、完全なクエリの画像です：

Query description

すべてのアイデアは、私はこれを実現する方法？ 私の見解では、LatLngBoundsを使用してルート境界をいくつかの値に拡大する必要がありますが、正確な値を計算する方法がわかりません。

前もって感謝します。

Answer 1

私がお勧めします：方向サービスはマップをautozooms後

1. はルートの境界を取得（またはマップビューポートを取得

2. マップアウト1時間（そのビューポートをズームします。 2倍のサイズはルート）

3. 中央ルートの境界の左側のサイズの中央に地図を表示するために必要とされる。

proof of concept fiddle

コードスニペット：

var map; 
 

 
function initMap() { 
 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    preserveViewport: true 
 
    }); 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 0, 
 
    center: { 
 
     lat: 41.85, 
 
     lng: -87.65 
 
    } 
 
    }); 
 
    directionsDisplay.setMap(map); 
 

 
    var onChangeHandler = function() { 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
    directionsService.route({ 
 
    origin: document.getElementById('start').value, 
 
    destination: document.getElementById('end').value, 
 
    travelMode: 'DRIVING' 
 
    }, function(response, status) { 
 
    if (status === 'OK') { 
 

 
     var bounds = response.routes[0].bounds; 
 
     var leftSide = new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: leftSide, 
 
     map: map 
 
     }); 
 
     console.log(leftSide.toUrlValue(6)); 
 

 
     google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
     map.setZoom(map.getZoom() - 1); 
 
     map.setCenter(leftSide); 
 
     }); 
 
     map.fitBounds(bounds); 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 10px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
    height: 50%; 
 
    opacity: 0.5; 
 
}

<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <input id="start" value="New York, NY" /> 
 
    <br><b>End: </b> 
 
    <input id="end" value="Boston, MA" /> 
 
    <br> 
 
    <input id="dirbtn" value="get directions" type="button" /> 
 
</div> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>