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:

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./ucovaj/1

• javascript
• api
• google-maps
• mootools

Share Improve this question Follow asked Jul 4, 2013 at 1:23 Oscar GodsonOscar Godson 32.8k4242 gold badges125125 silver badges206206 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./maps/documentation/javascript/tutorial#Loading_the_Maps_API for details)

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.

I came to a similar error while playing around with Google Maps JavaScript API v3 and it's Hello World sample, as it is said in the tutorial page I added the api like this:

<script type="text/javascript"
  src="https://maps.googleapis./maps/api/js?key={API_KEY}&sensor=SET_TO_TRUE_OR_FALSE">
</script>

But it gave me the message as in the title of this post, after some investigation I found that, in working samples there's another parameter passed in query string section of the api's url, which was the v for version, it wasn't mentioned that it's required but adding v=3.exp made it work.

<script type="text/javascript"
    src="https://maps.googleapis./maps/api/js?v=3.exp&key=xxxxxxxxx&sensor=false">
</script>

I hope it saves someone's precious time.

The event is generated before function and it does not recognize, you change this code:

$(document).ready(function() {      
google.maps.event.addDomListener(window, 'load', initialize);
});

for this code:

$(window).load(function(){
google.maps.event.addDomListener(window, 'load', initialize); 
});