CODEWITHSUNDEEP
javascriptgoogle-mapsiframegoogle-maps-api-3
gal007
gal007

Reputation: 7202

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

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?

Upvotes: 2

Views: 12707

Answers (3)

gal007
gal007

Reputation: 7202

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/

Upvotes: 3

user2661940
user2661940

Reputation: 101

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

Upvotes: 0

Eric Levine
Eric Levine

Reputation: 13564

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

Upvotes: 2

Related Questions