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

Call google.maps.event.trigger(map, "resize"); once map get loaded,Check fiddle demo,

DEMO

Answer 2

Place this code after marker is created or map is loaded:

google.maps.event.addListenerOnce(map, 'idle', function () {

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

});

idle event is fired when the map becomes idle after panning or zooming.

We are using resize method after the map becomes idle means all the loading is completed. So code waits for the map idle event (when all processing has stopped on the map) to happen, then it executes the resize method, this redraws the map to the correct dimensions.

Answer 3

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