Google Maps error "'addDomListener' of undefined"

Question

I feel like this is a fairly simple bit of code and the code being run in the iframe is taken as the example code from Google Map's docs, so it's something to do with the iframe, but I'm not sure.

In short, I'm creating an iframe, putting the Google Maps JS API in there, then loading a function into it that has the map example from their docs. I get

Uncaught TypeError: Cannot call method 'addDomListener' of undefined

Here's the JSBin link: http://jsbin.com/ucovaj/1

Answer 1

A look into the console would have told you something like this:

A call to document.write() from an asynchronously-loaded external script was ignored

You can't load the default-maps-script asynchronously, because it makes use of document.write() what can't be used after a document has finished loading.

You must load a special version in this case by adding a callback-parameter to the URL(see https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API for details)

Answer 2

I've only had a brief look but there is an error that you are redefining Map here:

var Map = function (opts) {

Does this need to be called Map? Perhaps myMap.