Getting a series of errors on some Goole maps JS, that will show a series of markers from a json file as well as showing the list. The map comes up and works with all the markers and info windows opening, but the list doesn’t open markers. I’m getting a series of errors as well in WordPress. I call the google map api in the functions file y=using enque. In a straight html, the page works fine with no errors.

The first error I’m getting is:

“initMap is not a function”
name
:
“InvalidValueError”
stack
:
“Error↵ at new kc (https://maps.googleapis.com/maps/api/js?key=MY-API-KEYk&callback=initMap&ver=4.7.4:47:499)↵ at Object._.lc
proto
:
Error

    <script type="text/javascript">
        var map;
        var arrMarkers = [];
        var arrInfoWindows = [];

        function mapInit(){
            var centerCoord = new google.maps.LatLng(48.058249, -122.288615);
            var mapOptions = {
                zoom: 12,
                center: centerCoord,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById("map"), mapOptions);
            $.getJSON("/wp-content/themes/the-language-of-puget-sound/js/map12.json", {}, function(data){
                $.each(data.places, function(i, item){
                $("#markers").append('<li><a href="#" rel="' + i + '">' + item.English_Name + '</a></li>');
                var image = '/wp-content/themes/the-language-of-puget-sound/js/Marker5-50.png';
                var marker = new google.maps.Marker({
                     position: new google.maps.LatLng(item.Y_DD, item.X_DD),
                     map: map,
                     icon: image,
                     title: item.English_Name
                     });
                     arrMarkers[i] = marker;
                     var infowindow = new google.maps.InfoWindow({
                        content: "<span style='font-family: 
                        LushootseedSulad; font-size: large;'>"+ item.Lushootseed +"</span><br><b>English Name: "+ item.English_Name +"</b><br>Meaning: "+ item.Meaning +"<br><img src="+ item.image +"><br>"+ item.Description +"<br><span style='font-family: LushootseedSulad; font-size: medium;'>"+ item.Lushootseed +"</span><br><audio controls='true' preload='none' style='width:200px'><br><source src='/wp-content/uploads/places/"+ item.audio +"'' type='audio/mpeg'/>", border: 4, maxWidth: 250,
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function() {
            var i = $(this).attr("rel");
            // this next line closes all open infowindows before opening the selected one
            for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }  
            infowindow.open(map, marker);
                    });
               });
           });
        }
        $(function(){
        // initialize map (create markers, infowindows and list)
    mapInit();

        // "live" bind click event
        $("#markers a").live("click", function(){
             var i = $(this).attr("rel");
        // this next line closes all open infowindows before opening the selected one
        for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); 
    }
    arrInfoWindows[i].open(map, arrMarkers[i]);
            });
        });
    </script>

Read more here: In WP, Google map error initMap is not a function


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: