Google map showing error but map showing correctly

I know many people faced this type of error because many question & answer related to this type of error

Below is my dynamic footer

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

custom.js look like

jQuery(document).ready(function($) {
    // Google Map
    function initMap(){
        var location = new google.maps.LatLng(40.712784, -74.005941);
        var myOptions = {
            zoom: 6,
            center: location,
            scrollwheel:false
        };
        var map = new google.maps.Map(document.getElementById("map"),
        myOptions);
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        // alert("Google Working");
    };
    google.maps.event.addDomListener(window, "load", initMap);
});

Map div only for contact-us.html page

<div id="map"></div>

but the map showing & also showing error like below

InvalidValueError: initMap is not a function

& all pages without contactus.html showing below error on the console

TypeError: a is null
...ndChild(c)};_.ug=function(a){for(var b;b=a.firstChild;)_.tg(b),a.removeChild(b)}

I'm searching last two days & applying for this but not any helpful answer.

I need to destroy error.

What's wrong with my code.

Thanks

Edited Based Answer Which Working Now

function initMap(){
 var divId = document.getElementById("map");
 if (!divId) {
    return;
 }

 var location = {lat: 40.712784, lng: -74.005941};
 var map = new google.maps.Map(divId,{
    zoom: 6,
    center: location,
    scrollwheel:false
 });
 var marker = new google.maps.Marker({
    position: location,
    map: map
 });
}

Load JS

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

Answers 1

  • Your function initMap() is scoped in anonymous function so googlemaps can't see this function. You should declare function in global scope without jQuery(document).ready(function($) { ...

    function initMap(){
        var div = document.getElementById("map");
        if (!div) {
            return;
        }
        var location = new google.maps.LatLng(40.712784, -74.005941);
        var myOptions = {
            zoom: 6,
            center: location,
            scrollwheel:false
        };
        var map = new google.maps.Map(div,
        myOptions);
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        // alert("Google Working");
    };
    window.onload = function() {
        if (google) {
            google.maps.event.addDomListener(window, "load", initMap);
        }
    }
    

    more about scopes: https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/#what-is-local-scope

    Loads libs:

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

Related Articles