Uncaught TypeError: Cannot set property 'position' of undefined

Question

I looked up google.maps.Map() and the Google reference says that the first parameter should be a mapDiv:Node which is the container for the map and is typically a div element.

You are passing $(this) which is likely a jQuery object which is not what Google maps is expecting. I don't know the rest of your code, but perhaps you should just be passing this instead of $(this).

If you're using jQuery, you need to pass the vanilla HTMLElement (e.g. Node) instead of the jQuery selection (e.g. Array/NodeList) which the $() query returns.

if you add a console command:

console.log(self);

it will return something like:

[ ▶ <div id="map_canvas"></div> ]

to get the value from the jQuery array, replace:

map = new google.maps.Map(self, mapOptions)

with:

map = new google.maps.Map(self[0], mapOptions)

I encountered this error when trying to initiate the map with something like this:

map = new google.maps.Map($('#map-canvas'), mapOptions);

I was able to solve it by selecting the first (and only) item that the selector returns by adding [0] after the selector:

map = new google.maps.Map($('#map-canvas')[0], mapOptions);