Avatar of dlearman1
dlearman1
Flag for United States of America 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>

Open in new window

I don't see the problem. Hopefully someone will.
GooglejQueryProgrammingJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
dlearman1

ASKER
Indeed I had forgotten to include the async defer reference. Thanks for the comment
Julian Hansen

You are welcome.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy