javascript - Gray Area On Google Map Canvas with error "Uncaught TypeError: Cannot set property 'position' of undefined" -

am getting weird problem working google maps; when initialize map, gray area in map canvas , error message

uncaught typeerror: cannot set property 'position' of undefined

here code

$(window).on("load", function () {      var c = 'jumbo-map';      function respondcanvas(canvas) {         $(canvas).attr('width', $(canvas).parent().width());         $(canvas).attr('height', $(canvas).parent().prev().height());         initialize_map(canvas);     }      function initialize_map(canvas) {         var map = new google.maps.map(canvas, {             center: new google.maps.latlng(2.778304, 32.301328),             streetviewcontrol: false,             maptypecontrol: true,             pancontrol: true,             zoomcontrol: true,             zoom: 17         });     }      respondcanvas(document.getelementbyid(c));  }); 

i've seen these without luck:

• google maps request returning "cannot set property 'position' of undefined"
• uncaught typeerror: cannot set property 'position' of undefined
• grey area in google maps

any appreciated, thx in advance

the problem (which not apparent javascript code in question seen in fiddle) using <canvas> element map.

don't misled use of word canvas in maps api example code may have looked at. maps api examples use canvas element id and/or variable name. poor choice of words in these examples! it's arbitrary name , doesn't imply element should use <canvas> tag.

change <canvas> tag in html code <div> , work.