CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3dictionaryinspect
Pritesh Mahajan
Pritesh Mahajan

Reputation: 5164

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 enter image description here

After open inspect element.

enter image description here

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>

Upvotes: 5

Views: 5852

Answers (3)

kumar
kumar

Reputation: 71

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.

Upvotes: 6

Dr.Molle
Dr.Molle

Reputation: 117334

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

Upvotes: 4

Wit Wikky
Wit Wikky

Reputation: 1542

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

DEMO

Upvotes: 0

Related Questions