Jak załadować mapę Google w ramce iframe z Javascriptem?

Mam problem z załadowaniem mapy Google w ramce iframe. chcę zrobićcoś takiego, ale wewnątrz iframe. Próbowałem na różne sposoby:

Próba wywołania funkcji showNewMap () przed załadowaniem skryptu. Ale otrzymuję następujący błąd: Nieprzechwycony TypeError: Object [obiekt globalny] nie ma metody „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);

Masz jakiś pomysł na rozwiązanie problemu?

questionAnswers(3)

yourAnswerToTheQuestion