Question

我想动态创建一个＆＃34;谷歌地图＆＃34;在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中动态生成和显示谷歌地图链接？

谢谢你的帮助！

Answer 1

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

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

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

Answer 2

我这样解决了：我已经为每个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>");

    }

Answer 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

Answer 4

没有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);

动态显示iframe中的谷歌地图

4 个答案: