asked on

Why is initMap returning "not a function" error.

I'm loading jQuery and Google Maps API using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="_js/vendor/jquery/2.1.4/jquery.min.js"><\/script>')</script>
            <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

Open in new window

InitMap looks like:

 <script>

                      var map;
                      var thisLatLng;

                      function CenterControl(controlDiv, map){

                            // Set CSS for the control border.
                            var controlUI = document.createElement('div');
                            controlUI.style.backgroundColor = '#fff';
                            controlUI.style.border = '2px solid #fff';
                            controlUI.style.borderRadius = 0;
                            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
                            controlUI.style.cursor = 'pointer';
                            controlUI.style.marginBottom = '12px';
                            controlUI.style.textAlign = 'center';
                            controlUI.title = 'VIEW LARGER MAP';
                            controlDiv.appendChild(controlUI);

                            // Set CSS for the control interior.
                            var controlText = document.createElement('div');
                            controlText.style.color = 'rgba(0, 98, 101, 1)';     //'hsla(182, 100%, 20%, 1)';      //'rgb(25,25,25)';
                            controlText.style.fontFamily = 'Helvetica,Arial,sans-serif';
                            controlText.style.fontSize = '14px';
                            controlText.style.fontWeight='bold';
                            controlText.style.lineHeight = '24px';      //38px';
                            controlText.style.paddingLeft = '5px';
                            controlText.style.paddingRight = '5px';
                            controlText.innerHTML = 'VIEW LARGER MAP';
                            controlUI.appendChild(controlText);

                             // Setup the click event listeners
                            controlUI.addEventListener('click', function() {
                                  $('#googleMapLgModalArtessa').modal({
                                        show: 'true'
                                   });
                            });
                      }
                  </script>

                  <script>

                      function initMap() {
                            console.log("initMap says hello");
                            var thisLatLng = new google.maps.LatLng(47.727998, -122.241533);
                            var mapOptions = {
                                zoom: 13,
                                center: thisLatLng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP,
                                disableDefaultUI: true          //remove this line or set to false if Google controls desired
                            };

                            map = new google.maps.Map(document.getElementById("google-map-panel-artessa"), mapOptions);

                            // Create the DIV to hold the control and call the CenterControl()
                            // constructor passing in this DIV.
                            var centerControlDiv = document.createElement('div');
                            var centerControl = new CenterControl(centerControlDiv, map);

                            centerControlDiv.index = 1;
                            map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);

                            var image = new google.maps.MarkerImage("_img/artessa/contact/map-marker/map-marker-artessa.png",
                                new google.maps.Size(136,90),
                                new google.maps.Point(0,0),
                                new google.maps.Point(0,90)
                            );

                            var shadow = new google.maps.MarkerImage("_img/artessa/contact/map-marker/shadow-marker-artessa.png",
                                new google.maps.Size(157, 46),
                                new google.maps.Point(0, 0),
                                new google.maps.Point(0, 41)
                            );

                            var marker = new google.maps.Marker({
                                position: thisLatLng,
                                map: map,
                                title:"Artessa",
                                icon: image,
                                shadow: shadow
                            });

                               //   map.addOverlay(new google.maps.Marker(point, markerOptions));

                      }     // end initMap

           </script>