Google Maps Not Loading Image and Marker

Question

This is my gmaps avscript code, i print maps as many as my data database, these gmaps are inside at collapsed div:

var maps = {!! $maps !!};
var googlemaps = [];

$.each(maps, function( key, item ) {
    googlemaps[key] = new GMaps({
        div: '#gmaps-' + key,
        lat: item.latitude,
        lng: item.longitude,
        width: '100%',
        height: '100%',
    });

    googlemaps[key].addMarker({
        lat: item.latitude,
        lng: item.longitude,
        width: '100px',
        draggable: false,
        title: 'Marker'
    });

    googlemaps[key].setCenter( item.latitude, item.longitude );
    googlemaps[ key ].setZoom( 15 );
});

The div by default is collapsed, after i open the div and show the gmaps, it's just showing blank grey maps, i try drag my map to search my marker, it only view a little part of the gmaps panel at the top left.

after i resize my browser the marker finaly can drag to center of panel but still grey.

I zoomed out/in and the image loaded, the image only loaded when i zoom in and out.

I really confused searching so many answer but not solving my problem.

Please help me..

Answer 1

When the map div , or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view.

In GMaps the google.maps.Map object is accessible using .map attribute, so your code will have to look something like this:

google.maps.event.trigger(googlemaps[key].map, "resize");

Remember to trigger it AFTER the div is visible. To be sure you can put the resize trigger into a timeout, when they click the div to display.

Side note: I am not sure if you are aware, but every map you create is a separate API call so to have multiple maps results in lot of separate API calls and if you don't have maps for business license you can hit limits pretty fast.