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

Viewed 1355

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&amp;
        destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&amp;
        key=******************************" 
    width="281" 
    height="370">
</iframe>

(Whitespace added for readability.)

example embed directions zoomed in too far, by default

Almost solutions:

Here's how it should look (e.g. with zoom=14 or - manual zoom-out):

enter image description here

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.

1 Answers
<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&amp;
    destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&amp;
    key=******************************"  allowfullscreen>
  </iframe>
</div>

you can try like this. Just set fixed width and height to div not to iframe

Related