如何将新的Google Maps共享链接转换为iframe嵌入式HTML？

Question

在我的应用程序中,用户只需粘贴一个类似youtube或vimeo视频或某些soundcloud音频的链接,然后就可以找出如何通过oembed嵌入.

因此,如果您将链接粘贴到从地址栏复制的视频,则可以将其弄清楚.如果您在"共享对话框"中粘贴应用程序启动的共享链接,它也可以正常工作.如果您粘贴iframe嵌入代码,我可以解析它并将其与白名单进行核对,您会再次获得完全相同的内容.

我也想添加谷歌地图嵌入,但它不支持oembed.此外,您现在可以获得"经典"(或旧版)Google地图,但您也可以获得新的Google地图.(为了使事情进一步复杂化,你也得到谷歌地图引擎,但现在让我们忽略那个..)

使用经典的谷歌地图,从共享链接转换为iframe嵌入网址是微不足道的,因为它实际上具有相同的网址参数,您只需添加一个output = embed网址参数,以便Google输出嵌入布局而不是桌面网站布局.

新的谷歌地图并不那么简单.共享链接的参数与嵌入链接的参数不同,您不能只进行简单的"前缀转换"并获得可用的内容.

我的意思是这是一个共享URL:

https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142

这是相同地图的嵌入iframe的src:

https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768

如果您只是将前缀更改https://www.google.com/maps/preview#!data=为https://www.google.com/maps/embed?pb=或返回它不起作用.

看起来其中的一些参数是相同的,但显然嵌入的参数更多.

是否有文档或代码或示例或其他内容解释这是如何工作的？我看到了我能想到的所有地方,我能找到的最接近的是iframely的谷歌地图插件,但他们只转换了一些参数,然后他们使用了旧谷歌地图的嵌入.我宁愿使用更小的新版本,至少当有人粘贴链接或嵌入新的谷歌地图时.

TL;博士

我想转换

https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142

至

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768" width="600" height="450" frameborder="0" style="border:0"></iframe>

要么

https://www.google.com/maps/preview#!data=!1m4!1m3!1d316784!2d9.927821!3d53.558572!4m12!2m11!1m10!1s0x0%3A0x4263df27bd63aa0!3m8!1m3!1d303354!2d9.927821!3d53.558572!3m2!1i1024!2i768!4f13.1

至

<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d303354.2311276431!2d9.927821!3d53.558572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!1s0x0%3A0x4263df27bd63aa0!5e0!3m2!1sen!2sus!4v1390395234903" width="600" height="450" frameborder="0" style="border:0"></iframe>

并使其工作就好像谷歌地图支持oembed.我意识到iframe代码有更多的信息,但对我来说唯一有用的属性是宽度和高度来获得宽高比和src.我怀疑大多数url参数都可以被猜测或默认,因为我只对坐标和缩放级别感兴趣.

Answer 1

我看不到使用您自己保存的地图来做到这一点的方法。但是，可以使用地名、坐标或搜索结果：

显示单个地点：

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;q=Space+Needle,Seattle+WA">

坐标：

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;center=-33.8569,151.2152&amp;zoom=18&amp;maptype=satellite"></iframe>

显示搜索结果：

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&amp;q=record+stores+in+Seattle"></iframe>