Ad

Center Point Is In Most Top-left Corner

- 1 answer

I have a Google Map and I've made a full-screen toggle button using API v3.

Problem:setCenter() center is in the most top-left corner of the map. Everything else works and if I change coordinates to something else, it actually changes center point but sets it to left-top corner for some reason. display:none; is used at first but I call resize if button is pressed..

What could be wrong?

//JS
if( document.getElementById( 'toggle-map' ) ) {

    google.maps.event.addDomListener( document.getElementById( 'toggle-map' ), 'click', function() {

        jQuery( '.spinner' ).fadeIn();

        jQuery( '#map-wrapper' ).toggleClass( 'fullscreen' );
        jQuery( 'body' ).toggleClass( 'locked' );
        jQuery( '.main-wrapper' ).toggleClass( 'locked' );

        map.setZoom( 5 );
        map.setCenter( new google.maps.LatLng( 50, 50 ) );

        google.maps.event.addListenerOnce( map, 'idle', function() {

            google.maps.event.trigger( map, 'resize' );

            jQuery( '.spinner' ).fadeOut( 800 );
        });
    });
}

//CSS
.fullscreen {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
}
.locked {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
    z-index: 9999;
    top: 0;
}
Ad

Answer

Fix: add setCenter()AFTER'resize' event.

Ad
source: stackoverflow.com
Ad