Question

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

一切都运作得很好，但我注意到了一些奇怪的事情。

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

New look Google maps

在这里，我可以生成一个iFrame，用于在我的网站上手动嵌入GMap，保持新的，干净的外观和相当方便的“获取路线”叠加：

enter image description here

然而，当使用maplace.js（因此，实际上是地图API）时，我仍然可以看到漂亮而干净的控件的旧外观：

enter image description here

我已经搜索了高低，以便让思考与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

我想在我正在处理的网站上做同样的事情。我们发现用这个小星星保存用户谷歌地图收藏夹的位置确实非常有用，然后我意识到iframe使用的服务器端配置与我们提供的API不同。我们还检查了JavaScript版本的更改日志，遗憾的是现在没有这样的功能。

https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

Answer 2

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

＆＃34;新面貌＆＃34;我在问题中引用的地图是作为 Google Maps Embed API 的一部分生成的。

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

无使用/流量限制
如果用户登录到他/她的帐户

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

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

根据documentation，其中如下：

{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本身，并以某种方式模糊其他东西： - /

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

2 个答案: