jquery - Google Maps not filling up the entire div -

jquery - Google Maps not filling up the entire div -

i've been trying set google maps on website, it's showing fraction of it, div remains empty. lot of solutions suggest include resize function, doesn't seem work. here code:

function initialize() { var mapcanvas = document.getelementbyid('map_canvas'); var mapoptions = { center: new google.maps.latlng(42.378343, 20.427202), zoom: 8, maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(mapcanvas, mapoptions) } google.maps.event.adddomlistener(window, 'load', initialize); google.maps.event.trigger(map, "resize");

map canvas , it's wrapping div both set 100% width. help appreciated

heres looks like:

try trigger resize on map when loaded:

google.maps.event.addlisteneronce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); });

jquery google-maps