Google map not fully loaded when i open inspect element it will work

Question

i have integrate a google map on my website but when i open inspect element map will work and when i close map will disappear. Please let me know what the problem

b

Answer 1

To explain what happens when you open the dev-tools: The viewport-size of the window changes, the resize-event of the window fires and the size of the map will be re-calculated. The same will happen when you resize the window in any other manner.

Related to the usage of tabs(http://jsfiddle.net/KhwZS/1300/): The map-tab initially is hidden(the map-size is 0x0), trigger the resize-event of the window when the map-tab has been activated(which will force the re-calculation of the map-size):

$( ".tabs" ).tabs({
    activate: function( event, ui ) {if(ui.newPanel.has('#map-canvas')){
        google.maps.event.trigger(window,'resize',{});};}
});

Demo: http://jsfiddle.net/KhwZS/1476/

As it's still unclear which code creates the map in the screenshot my answer is: trigger the resize-event of the window or map when you show the map