GoogleMaps does not get initialize on a page load

Question

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);
        }
    }

The function doesn't seem to be inside a ` – alpakyol Jul 21 '17 at 08:25 — alpakyol, Jul 21 '17 at 08:25
yes it is, I forgot to add that in my question – beginerdeveloper Jul 21 '17 at 08:27 — beginerdeveloper, Jul 21 '17 at 08:27

score 1 · Accepted Answer · answered Jul 21 '17 at 07:52

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.

You mean that my script will be excuted as soon as it is avaiable — beginerdeveloper, Jul 21 '17 at 08:18
just remove async and defer and it will work like a charm. Although I don't support that. — Jaymin, Jul 21 '17 at 09:13

score 0 · Answer 2 · answered Jul 21 '17 at 07:44

0

Did you try removing the async ?

answered Jul 21 '17 at 07:44

snow

162
1
13

i didn't try it – beginerdeveloper Jul 21 '17 at 07:47
what is the async mean? – beginerdeveloper Jul 21 '17 at 07:50
1

Asynchronous : When a task is executed asynchronously, you can directly switch to another task before the previous has been completed. One task does not depend on the other. if need more information go to the link https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean – Md.Shahjalal Jul 21 '17 at 08:02

GoogleMaps does not get initialize on a page load

2 Answers2