无法获得嵌入"新外观"的Google地图

Question

为客户建立一个网站我需要定期嵌入GMaps.为此,我使用maplace.js.

这一切都很好,但我注意到一些奇怪的事情.

我已经在我的Google帐户上启用了谷歌地图的新"外观",所以现在它看起来非常漂亮和干净:

在这里,我可以生成一个iFrame,用于在我的网站上手动嵌入GMap,保持新的,干净的外观和相当方便的"获取方向"叠加:

但是,当使用maplace.js(因此实际上是地图API)时,我仍然可以看到漂亮而干净的控件的旧外观和noe:

我已经搜索了高低,以便让思考看起来与Google生成的框架相同,但没有运气.

这些是我用来完成任务的包含:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.exp"></script>
<script type="text/javascript" src="/Scripts/maplace.min.js"></script>

这是应用于地图的CSS:

#gmap {
    height: 300px;
    width: 100%;
}

实际的地图嵌入:

<script>
new Maplace({
    map_options: {
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    visualRefresh: true,
    locations: [

            {lat: 50.871197, lon:  4.696941000000038, zoom: 15}



    ]
}).Load();
</script>

有人对此有何想法？

Answer 1

我终于弄清楚了这一点（实际上很奇怪，似乎没有其他人已经这样做了）。

我在问题中提到的“新外观”地图是作为Google Maps Embed API的一部分生成的。

此 API 提供了许多好处（除了用户查看它们的漂亮外观和上下文之外）：

• 无使用/流量限制
• 如果用户登录到他/她的帐户，则会为查看地图的用户提供上下文

此外，如果您打算在网站上使用它们，那么从任何给定的内容管理器嵌入此类地图似乎很容易。这是因为嵌入它们的 src 属性始终具有以下布局：

https://www.google.com/maps/embed/v1/MODE?key=API_KEY&parameters

根据文档，其中如下：

• {MODE}：是地点、方向、搜索或视图之一。
• {API_KEY} 是您的免费 API 密钥。
• 参数包括可选参数

提供的示例似乎表明，将 CMS 的内容字段链接到 iframe src 属性的 {MODE} 字段应该很容易：

https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Fisht+Olympic+Stadium,Sochi+Russia

这就是我一直想要实现的目标。看来我只是过度关注 Maps API 本身，而忽略了其他内容:-/