Google Maps v3 Shifting After Loading in Wordpress

Question

The page loads with Google Maps and doesn\'t initially fill the container surrounding it. Half second later Google maps fills up the container.

The problem is it\'s

Answer 1

I decided to write a answer to could help somebody else with same problem.

I stumbled upon this problem recently and had same problem plus something else. Google maps zoom bar wasn't visible and every image had a nice gray border :) All problems because of default styles in twentythirteen theme:

/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

and lower

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
    /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

I had my google-map object in a div with id = map_canvas. Solution was to add in my styles overwrites of above styles:

 #map-canvas img {
     max-width: none!important;
    border-radius: none!important;
    box-shadow: none!important;
 }

Voila ! The map is clean :)