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 have experienced this issue before a few times, not with wordpress as i steer clear from that package.. But two causes i had we...

One would only occur each time after the map was viewed/loaded and that was due to the gmaps external script call being loaded more then once.

The second was due to a relative/absolute position element that was affecting the maps block element... I cant recall 100% as been a few weeks since that..

How are you handling the onload events and so forth...

Answer 2

The problem was in the default theme wordpress uses. The below line of code outlines it was only allowing it to go to 97.5% of the width it needed to messing up google maps.

.entry-content img, .comment-content img, .widget img { max-width: 97.5%; }

Correct code (or what worked for me):

.entry-content img, .comment-content img, .widget img { max-width: none; }

Answer 3

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 :)