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);
        // initialize map (create markers, infowindows and list)

        // "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]);

closed as off-topic by Mark Kaplun, cjbj, Dave Romsey, Howdy_McGee May 10 '17 at 5:01

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.



This api request requires an existing callback. Rename your function from mapInit to initMap and it will work (unless your function is invalid).

  • That worked perfectly to remove that error. I had thought about changing it before but felt it would change anything since it was working fine in straight html/js. – user2141419 Apr 30 '17 at 18:40
  • So on to the next error, -- Uncaught TypeError: $(...).live is not a function So I' guessing the first I initMap was not done globally. – user2141419 Apr 30 '17 at 18:41
  • .live() is deprecated and removed since jQuery 1.9 (api.jquery.com/live). use .on('click', function() { … }). – s t May 1 '17 at 1:18
  • Perfecto! works great Only warnings I get now are some about warnings about upcoming depreciation in Chrome about zoom, but I don't see any code in my css about that. – user2141419 May 1 '17 at 6:25
  • use your console and look for the origin of the warning. it’s probably not in your css files. – s t May 1 '17 at 9:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.