How to load a Google Map in an iframe with Javascr

Question

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?

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

Answer 2

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/

Answer 3

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