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

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&amp;
        destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&amp;
        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.

Hard_Coder · Answer 1 · 2019-12-19T12:22:20.840

0

<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

edited Dec 19 '19 at 12:22

answered Dec 11 '19 at 20:36

Hard_Coder

718
6
13

Thanks, a valid thing to try, setting the iframe to fill an outer div. But alas I can't try it because Google seems to have fixed it. (And I just today fixed my links to the live example, which were broken.) – Bob Stein Dec 12 '19 at 23:07

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

1 Answers1