CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Corentin Branquet
Corentin Branquet

Reputation: 1576

Google map in top corner left

I want to display a google map in a 100% width. But I encounter this problem. It displays only in the top left corner

https://i.sstatic.net/4fyvK.jpg

I toggle this map with jquery too. Here's my code

    function initialize() {
        var latitude = 48.3592727;
        var longitude = -2.6350914;
        var zoom = 8;

        var LatLng = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: zoom,
            center: LatLng,
            panControl: false,
            zoomControl: false,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById('map-nos-agences'), mapOptions);



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

}

    $("#map-nos-agences").hide();

    if($j("#map-nos-agences").length>0) {
        initialize();
    }

    $("#hideshow").click(function(){

        $("#map-nos-agences").toggle('slow');

    });

When I'm not toggle it, it displays correctly. Thanks for the help !

Upvotes: 2

Views: 335

Answers (1)

Joanvo
Joanvo

Reputation: 5827

Try triggering a resize on the map idle event:

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

Upvotes: 1

Related Questions