-1

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>

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.

0

maps.googleapis.com/maps/api/js?key=MY-API-KEYk&callback=initMap&ver=4.7.4:47:499

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.