zooming - Google Maps Embed API 的方向 - 缩放以适合起点和目的地

Question

Google map Embed API 对于 directions并不总是在框架中显示起点和终点。有时默认缩放级别会放大太多。

<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>

(添加空格以提高可读性。)

几乎解决方案:

• 对于 JavaScript API 版本 3，使用 map.fitBounds()，https://stackoverflow.com/a/19304625/673991
• 对于 JavaScript API，使用 map.getBoundsZoomLevel()，https://stackoverflow.com/a/2362436/673991
• 显式缩放，https://stackoverflow.com/a/23300810/673991 (显式的 zoom 参数不是通用的解决方案，因为不可能知道正确的值。在这个例子中它将是 zoom=14。)

它应该是这样的(例如使用 zoom=14 或 - 手动缩小):

这是一个 live example .

Embed API 中是否有任何解决方案或变通方法？这是bug吗？ ？

更新 2018 年 2 月，这似乎已得到修复。也就是说，在 live example 上Bad Map 现在看起来与解决方法相同。我猜这比回答或认罪要好。

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

你可以这样试试。只需将固定宽度和高度设置为 div 而不是 iframe