如何使用Javascript在iframe中加载Google Map？ [英] How to load a Google Map in an iframe with Javascript?

问题描述

我在加载iframe中的Google地图时遇到了麻烦。我想做类似的东西，但在iframe中。我尝试过不同的方式：

尝试在加载脚本之前调用showNewMap（）函数。但我得到以下错误：Uncaught TypeError：Object [object global] has no method'showNewMap'： http：// jsfiddle.net/9RE4h/1/

  var iframe = document.createElement（iframe）; 
 document.body.appendChild（iframe）; 
 var doc = iframe.contentWindow || iframe.contentDocument; 
 if（doc.document）{doc = doc.document;} 
 
 function showNewMap（）{
 
 var mapContainer = doc.createElement（'div'） ; 
 mapContainer.setAttribute（'style'，width：500px; height：300px）; 
 doc.body.appendChild（mapContainer）; 
 
 var mapOptions = {
 center：new google.maps.LatLng（-35.000009，-58.197645），
 zoom：5，
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
} 
 
 var map = new google.maps.Map（mapContainer，mapOptions）; 
} 
 
 var script = doc.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&'+'callback = showNewMap'; 
 doc.getElementsByTagName（'head'）[0] .appendChild（script）; 
  

有什么想法可以解决这个问题吗？

解决方案

兼容Firefox-Google Crome：

  var iframe = document.createElement（iframe ）; 
 iframe.onload = function（）{
 var doc = iframe.contentDocument; 
 
 iframe.contentWindow.showNewMap = function（）{
 var mapContainer = doc.createElement（'div'）; 
 mapContainer.setAttribute（'style'，width：500px; height：300px）; 
 doc.body.appendChild（mapContainer）; 
 
 var mapOptions = {
 center：new this.google.maps.LatLng（-35.000009，-58.197645），
 zoom：5，
 mapTypeId：this。 google.maps.MapTypeId.ROADMAP 
} 
 
 var map = new this.google.maps.Map（mapContainer，mapOptions）; 
} 
 
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&'+'callback = showNewMap'; 
 iframe.contentDocument.getElementsByTagName（'head'）[0] .appendChild（script）; 
}; 
 document.body.appendChild（iframe）; 
  

小提琴： http://jsfiddle.net/gS7sZ/1/

I'm having a trouble with loading a Google Map in an iframe. I want to do something like this, but inside an iframe. I have tried in different ways:

Trying to call the showNewMap() function before loading the script. But I get the following error: Uncaught TypeError: Object [object global] has no method 'showNewMap': http://jsfiddle.net/9RE4h/1/

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}

function showNewMap() {

    var mapContainer =  doc.createElement('div');
    mapContainer.setAttribute('style',"width: 500px; height: 300px");
    doc.body.appendChild(mapContainer);

    var mapOptions = {
        center: new google.maps.LatLng(-35.000009, -58.197645),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(mapContainer,mapOptions);
}

var script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);

Any idea to solve the problem?

解决方案

Firefox-Google Crome compatible:

var iframe = document.createElement("iframe");
iframe.onload = function() {
   var doc = iframe.contentDocument;

   iframe.contentWindow.showNewMap = function() {
    var mapContainer =  doc.createElement('div');
    mapContainer.setAttribute('style',"width: 500px; height: 300px");
    doc.body.appendChild(mapContainer);

    var mapOptions = {
        center: new this.google.maps.LatLng(-35.000009, -58.197645),
        zoom: 5,
        mapTypeId: this.google.maps.MapTypeId.ROADMAP
    }

    var map = new this.google.maps.Map(mapContainer,mapOptions);
}

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
iframe.contentDocument.getElementsByTagName('head')[0].appendChild(script);
};
document.body.appendChild(iframe);

Fiddle: http://jsfiddle.net/gS7sZ/1/

这篇关于如何使用Javascript在iframe中加载Google Map？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！