在 iframe 中动态显示谷歌地图答案

【问题标题】：Display google maps in iframe dynamically在 iframe 中动态显示谷歌地图
【发布时间】：2014-09-14 21:00:24
【问题描述】：

我想在 javascript 中动态创建一个“谷歌地图”链接，然后将其设置为我的 iframe 的 src，但我不知道谷歌地图是否不可能，因为这不起作用：

    document.getElementById('map_canvas').src='http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=209246852521822593612.0004feda304ac527ea40a&amp;output=embed';

虽然，例如这是可行的：

    document.getElementById('map_canvas').src='http://www.cnn.com';

这是我的 iframe：

<iframe id="map_canvas" name="map_canvas" width="100%" height="600px"
    frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
    src="">
</iframe>

能否解释一下，如何在 iframe 中动态生成和显示谷歌地图链接？

感谢您的帮助！

【问题讨论】：

为什么要使用 iframe？这可能不是您真正想要的，因为通常有更好的解决方案。
我想使用 HTML 5 geolocation API 获取我的位置，然后将地图居中放置到我的位置，我知道我可以直接使用 Google Maps API，但我需要使用 iframe，因为我的地标地图。
也可以通过编程方式添加地标。使用 var marker = new google.maps.Marker({ map: map_var_from_googlemapsMap, position: mapLocation, title: "works!" });
可能重复stackoverflow.com/questions/15388897/…
可能会有帮助：stackoverflow.com/a/7898520/602554

标签： javascript html google-maps iframe

【解决方案1】：

我是这样解决的：我已经为每个 jQuery 添加了 iframe 并设置了所需的 src attr。

function displayMapAt(lat, lon, zoom) {
        $("#map")
                .html(
                        "<iframe id=\"map_frame\" "
                                + "width=\"100%\" height=\"600px\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" "
                                + "src=\"https://www.google.sk/maps?f=q&amp;output=embed&amp;source=s_q&amp;hl=sk&amp;geocode=&amp;q=https:%2F%2Fwww.google.sk%2Fmaps%2Fms%3Fauthuser%3D0%26vps%3D5%26hl%3Dsk%26ie%3DUTF8%26oe%3DUTF8%26msa%3D0%26output%3Dkml%26msid%3D205427380680792264646.0004fe643d107ef29299a&amp;aq=&amp;sll=48.669026,19.699024&amp;sspn=4.418559,10.821533&amp;ie=UTF8&amp;ll="
                                + lat + "," + lon
                                + "&amp;spn=0.199154,0.399727&amp;t=m&amp;z="
                                + zoom + "\"" + "></iframe>");

    }

【讨论】：

【解决方案2】：

没有 iframe 的解决方案：

在您的 javascript 文件中添加以下内容：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?callback=initialize&v=3.exp&sensor=false&language=nl'; //add you api key later
document.body.appendChild(script);

function initialize(element_id, lat, lng, zoom) 
{
    zoom || zoom = 10;

    var mapLocation = new google.maps.LatLng(lat, lng);
    var mapOptions = 
    {
        center: mapLocation,
        zoom: zoom
    };

    var map = new google.maps.Map(document.getElementById(element_id), mapOptions);
}

按需使用：

initialize('some_div_id', 52.56, 10.3);

【讨论】：

【解决方案3】：

使用 google maps embed api 嵌入 iframe。您走在正确的轨道上，您只需要为您的 src 稍微不同的 URL 结构。

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

地点：

{MODE} is one of place, directions, search, or view, as described in the Modes section of this document.

{API_KEY} is your free API key.

Parameters include optional parameters, as well as mode-specific parameters.

来源：https://developers.google.com/maps/documentation/embed/guide

【讨论】：

谢谢，但即使我将 iframe 的 src 设置为 google maps embed api 链接，它也不起作用，因为它不会显示来自 google maps 的地标。

【解决方案4】：

Google 希望您以固定方式访问他们的地图。

如果您想在自己的网站上嵌入经典地图，请转到 here 并按照这些简单的说明获取嵌入代码。

或者，如果您需要更多控制权，请尝试Google Maps Javascript API 3。您可以免费注册，并使用他们的教程和示例代码进行设置。

【讨论】：