How to load a Google Map in an iframe with Javascript? - Stack Overflow

admin 管理员组

文章数量: 1086019

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': /

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 = '.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);

Any idea to solve the problem?

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/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./maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);

Any idea to solve the problem?

• javascript
• google-maps
• iframe
• google-maps-api-3

Share Improve this question Follow edited Aug 12, 2013 at 15:30 André Dion 21.8k77 gold badges5858 silver badges6060 bronze badges asked Aug 12, 2013 at 15:23 gal007gal007 7,21299 gold badges5050 silver badges7373 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Firefox-Google Crome patible:

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./maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
iframe.contentDocument.getElementsByTagName('head')[0].appendChild(script);
};
document.body.appendChild(iframe);

Fiddle: http://jsfiddle/gS7sZ/1/

The problem relates to your scope within JavaScript. When you defined the showNewMap function, it gets bound to the main window object, but you need it defined inside your iFrame. The following should work (see: http://jsfiddle/4Ret8/):

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

iframe.contentWindow.showNewMap = function() {
    //debugger;
    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 = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis./maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);

The function showNewMap() is not visible in the frame, you must add the function showNewMap() in the frame

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

var func = "function showNewMap() { "+
    "var mapContainer =  document.createElement('div');"+
    "mapContainer.setAttribute('style','width: 500px; height: 300px');"+
    "document.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 scriptMap = doc.createElement('script');
scriptMap.type = 'text/javascript';
var newContent = document.createTextNode(func);
scriptMap.appendChild(newContent);
doc.getElementsByTagName('head')[0].appendChild(scriptMap);

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

本文标签： How to load a Google Map in an iframe with JavascriptStack Overflow