Why is initMap returning "not a function" error.

dlearman1 used Ask the Experts™
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:

                      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';

                            // 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.lineHeight = '24px';      //38px';
                            controlText.style.paddingLeft = '5px';
                            controlText.style.paddingRight = '5px';
                            controlText.innerHTML = 'VIEW LARGER MAP';

                             // Setup the click event listeners
                            controlUI.addEventListener('click', function() {
                                        show: 'true'


                      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;

                            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,
                                icon: image,
                                shadow: shadow

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

                      }     // end initMap


Open in new window

I don't see the problem. Hopefully someone will.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
I am guessing the reference to the googlemaps API script comes before your <script></script> for initMap

You need to include the defer attribute

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

Open in new window

defer tells the browser to load the script only after the document is ready.

See script attributes for more details


Indeed I had forgotten to include the async defer reference. Thanks for the comment
Most Valuable Expert 2017
Distinguished Expert 2018

You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial