how to have Google Maps position set to fixed using the jquery + gmap3 library

Question

I have been struggling to make position fixed for the google maps div even when I tried appending events on the gmap3 library using on like $('#map-google').gmap3({}).on(tilesloaded: function(){}) trying to apply this answer but it doesnt work and I have spend like 3 hours doing this. So I'm going to leave my founds here for someone having the same issue.

Answer 1

Serching on internet there's an answer using vanilla javascript but none using jquery and the gmap3 library

For those three to work you gotta put it in this way

$('#map-google').gmap3({
        map: {
            options:{
              center:center,
              scrollwheel: false,
              zoom: 12
            },
            events: {
               tilesloaded: function(){
                  $('#map-google').css('position','fixed')
            }
         },
    },