GoogleMaps displaced out of view

Question

I have an issue with my map since i put it from the sidebar to the main content of my page.

The map is displaced to the upper right corner and the rest of the canvas keeps blank.

Goto this link:

http://bit.ly/1u8gFBb (click on Map within the tabs below the image)

• Can someone suggest what this causes this rendering problem and how to solve?

Answer 1

Refer this questions!

• Question 1
• Question 2
• Question 3

---

SOLUTION:

I found the solution in above questions.

I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:

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

or

Resize the map

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

Recenter the map, where myCenter is your lat, lng point.

map.setCenter(myCenter);

Answer 2

The "tab" which I added before was a li within the tabs the content get into troubles.

Answer 3

1) There are certain things missing in your API. 2) Check your logs..