Google maps javascript: Showing route on half map

Question

I'm working on a webpage which has to show google maps in the background and a form on left half of the page and the right half should show the requested route. please know that the google map will cover 100% width of the page. Here is the complete query picture:

Query description

Any ideas how should I accomplish this? In my view it should be done with LatLngBounds, extending route bounds to some value to the left but I'm not sure how to calculate that exact value so that the route is placed on desired place on the map..

Thanks in advance.

Answer 1

I would suggest:

1. get the bounds of the route (or get the map viewport after the direction service autozooms the map.

2. zoom the map out 1 time (so the viewport is twice the size needed to show the route)

3. center the map on the center of the left size of the bounds of the route.

proof of concept fiddle

code snippet:

 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>