CODEWITHSUNDEEP
javascripthtmlgoogle-maps
beginerdeveloper
beginerdeveloper

Reputation: 845

GoogleMaps does not get initialize on a page load

I am using googleMaps API javascript, some time it works well but some time I reload the page then I got an exception in console tap of browsers and the map doesn't show.

Uncaught nc js?key=MyAPIKey&callback=initMap:98 my javascript Code:

    <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=NyAPIKey&callback=initMap">
        </script>

function initMap() {
        if (typeof google === 'object' && typeof google.maps === 'object') {
            // Create the map.
            var map = new google.maps.Map(document.getElementById('googleapi'), {
                zoom: 14,
                center: { lat: @Model.SelectedAppliance.Lat, lng: @Model.SelectedAppliance.Lon },
                mapTypeId: 'terrain'
            });

            var marker = new google.maps.Marker({
                position: map.center,
                map: map,
                title: 'Device Home'
            });

            // Construct the circle for each value in citymap.
            // Note: We scale the area of the circle based on the population.
            var positionCircle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: map.center,
                radius: getMeters(@Model.SelectedAppliance.TriggerMile),
            });

            return positionCircle;
        } else {
            window.location.reload(true);
        }

    }

    function ContainPoint(device, lat, lon) {
        if (typeof google === 'object' && typeof google.maps === 'object') {
            markerCPosition = new google.maps.LatLng(lat, lon);
            var circleBounds = initMap().getBounds();
            if (!circleBounds.contains(markerCPosition)) {
                $(device).hide(true);
            }
        } else {
            window.location.reload(true);
        }
    }

Upvotes: 0

Views: 63

Answers (2)

Jaymin
Jaymin

Reputation: 1661

It’s 2016 and if you’re not using unblocking async and defer tags on your client side Javascript, you need an intervention.

If the async attribute is present, then the script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes).

If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing.

If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete, thereby, making everything slow and crappy.

We add both because async is not supported on all browsers, and defer serves as a fallback for these older browsers.

If async is present, then the script will be executed as soon as it is available, but without blocking further parsing of the page. If async is not present but defer is, then the script is executed when the page has finished parsing.

Upvotes: 1

snow
snow

Reputation: 162

Did you try removing the async ?

Upvotes: 0

Related Questions