自定义创建的谷歌地图嵌入答案

【问题标题】：CUSTOM CREATED google maps embedding自定义创建的谷歌地图嵌入
【发布时间】：2015-05-05 08:18:48
【问题描述】：

我在使用 <iframe> 嵌入我的地图时遇到问题（协议必须匹配）。一种建议的解决方法是将 https 替换为 http 但这没有任何作用，因为无论如何谷歌都会通过 SSL 强制它。此外，同时省略 http 和 https，如下所示：//www.google.com 什么也不做。 Another 解决方案是将地图坐标、缩放等硬编码到 javascript 中，完全省略 <iframe>。但是，这不是我需要的。

我需要我的自定义地图，带有可点击的图钉、默认视图（位置和缩放）和基本地图设置。 javascript 中是否有办法引用此地图，甚至可以从头开始构建地图，但无需向 Google 注册 API_KEY？

【问题讨论】：

到目前为止您尝试了什么？你得到什么错误？？
[错误] 阻止原点 "https://www.google.co.uk" 的帧访问原点 "http://marvin.kset.org" 的帧。请求访问的帧具有“https”协议，被访问的帧具有“http”协议。协议必须匹配。

标签： javascript google-maps iframe google-maps-embed

【解决方案1】：

您需要使用https 并为 Google 地图的嵌入 API 提供 API_KEY。此外，您必须对坐标、缩放等进行硬编码，除非您使用服务器端代码插入值（使用 PHP 或 Python 以编程方式插入值）

如果您不想提供 API_KEY 并引用地图对象，则必须使用 Google Map 的 Javascript API。

这是一个展示简单谷歌地图的演示：https://developers.google.com/maps/documentation/javascript/examples/map-simple

如果您想要更多自定义，可以查看这个样式化的 Google 地图演示： https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

【讨论】：