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

问题

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

before

After open inspect element.

Code is here

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>

<body>


    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var $latitude = document.getElementById('latitude');
            var $longitude = document.getElementById('longitude');
            var latitude = -25.363882;
            var longitude = 131.044922;
            var zoom = 7;

            var LatLng = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);


            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag Me!',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });


        }
        initialize();
    </script>

</body>

</html>

回答1:

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.

回答2:

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

回答3:

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

DEMO

来源：https://stackoverflow.com/questions/23755975/google-map-not-fully-loaded-when-i-open-inspect-element-it-will-work

标签

google-maps

google-maps-api-3

map

inspect