CODEWITHSUNDEEP
google-maps
Casey
Casey

Reputation: 2719

Google Map visibly resizing on load

I'm showing a Google Map within a div using the code below. When the page loads the map appears to bounce around before settling. Is there a way to stop this behavior? The page is here.

function initialize() {

    myform.search.focus();

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(41.850033, -87.6500523);

    var mapOptions = {

       zoom: 2,

       center: latlng,

       mapTypeId: google.maps.MapTypeId.ROADMAP
    }

   map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

}

Upvotes: 0

Views: 54

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

The following works for me:

initially set the visibility-style of #map_canvas to hidden

Then wait for the tilesloaded-event to show the map(with a short delay):

google.maps.event
 .addListenerOnce(map,
                  'tilesloaded',
                   function(){var that=this;
                              setTimeout(function(){
                                  that.getDiv().style.visibility='visible'},
                                  100);
                   });

Upvotes: 1

Related Questions