Google Maps Embed API for directions - zoom to fit origin and destination - zooming

Question

The Google Maps Embed API for directions doesn't always show the origin and destination in the frame. Sometimes the default zoom level is zoomed-in too much.
<iframe
src="https://www.google.com/maps/embed/v1/directions?
origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&
destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&
key=******************************"
width="281"
height="370">
</iframe>
(Whitespace added for readability.)
Almost solutions:
for JavaScript API version 3, using map.fitBounds(), https://stackoverflow.com/a/19304625/673991
for JavaScript API, using map.getBoundsZoomLevel(), https://stackoverflow.com/a/2362436/673991
with explicit zoom, https://stackoverflow.com/a/23300810/673991 (The explicit zoom parameter is not a general solution because it's impossible to know the correct value. In this example it would be zoom=14.)
Here's how it should look (e.g. with zoom=14 or - manual zoom-out):
Here is a live example.
Are there any solutions or workarounds within the Embed API? Is this a bug?
UPDATE in February 2018 this appears to have been fixed. That is, on the live example the Bad Map now looks the same as the workaround. Guess that's better than an answer or a mea culpa.

Answer 1

<div style="height: 400px">
<iframe width="100%" height="100%"
src="https://www.google.com/maps/embed/v1/directions?
origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&
destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&
key=******************************" allowfullscreen>
</iframe>
</div>
you can try like this. Just set fixed width and height to div not to iframe