Question

我正在尝试使用jQuery将Google Map Iframe添加到我的HTML网页。当我简单地将其硬编码到我的HTML中时，我能够使用它，但是我使用jQuery来创建和格式化所有HTML和内容。

此静态HTML可以正常工作：

<iframe width="450"
        height="250"
        frameborder="0" style="border:0"
        src="https://www.google.com/maps/embed/v1/view?key={MY_KEY}&center={LATITUDE,LONGITUDE}&zoom=4&maptype=satellite"></iframe>

但是如果我尝试在jQuery中做同样的事情，它只会显示边框。

jQuery代码：

$('.hiddenDiv').append('<iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key={MY_KEY}&center={LATITUDE,LONGITUDE}&zoom=4&maptype=satellite"></iframe>');

我将纬度和经度的值传递给iframe，但即使我对这些值进行硬编码，也会出现同样的问题。如果我在加载后查看网页的元素，我可以看到谷歌地图iframe以及它从谷歌中提取的相应元素。虽然边界以外的其他任何东西都可以显示出来。

修改

我认为这与我将地图插入隐藏的Div（显示：无）有关。如果我将其插入到任何其他未隐藏的div中，那么它将按预期工作。我也使用jQuery切换这个隐藏的Div来显示它的内容。

任何帮助都会很棒。

干杯。

Answer 1

您可能想以这种方式尝试。

$('<iframe />', {
    name: 'myFrame',
    id:   'myFrame',
    src: 'https://www.google.com/maps/embed/v1/view?key={MY_KEY}&center={LATITUDE,LONGITUDE}&zoom=4&maptype=satellite'
}).appendTo('.hiddenDiv');

我想知道这是否有效。

Answer 2

试试这个：http://jsfiddle.net/lotusgodkk/GCu2D/179/ JS：

$(document).ready(function () {
    setTimeout(function () {
        $('.hiddenDiv').show('fast', function () {
            $(this).append('<iframe frameborder="0" style="border:0" src="https://maps.google.com/maps?output=embed&iwloc&z=12&t=p&q=Bangalore India"></iframe>');
        });
    }, 1000);
});

CSS：

.hiddenDiv {
    display:none;
    height:500px;
    width:500px;
}
iframe {
    height:inherit;
    width:inherit;
}

HTML：

<div class="hiddenDiv"></div>

注意：我更改了iframe的src用于测试目的，同时也使用了setTimeout。但逻辑仍然是一样的。

使用jQuery将Google Map Iframe插入Div

2 个答案: