asked on

Why is initialize not a function?

Just learning JavaScript, and probably just confused about this, but I don't see why I'm getting console log error "InvalidValueError : initialize is not a function." I'm not getting any other js errors, so I'm thinking the function itself is good. Everything seems to be in the scope of the wrapper function? The initialize function is plainly declared as the first function under the $(function() wrapper function.

Here is my code, or for a live look, http://www.pricelearman.com/beta/serena_b7/artessa.htm

 $(function() {
                  $('#googleMapLgModalArtessa').on('shown.bs.modal', function() {
                      $.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyALGcS8tFxXL6eMp2O7rGbl6voJdXlaSLk&callback=initialize",function(data, status) {
                            console.log( data );
                            console.log( status );
                         //   console.log( resize.status );
                        });
                  });

                  $("#map-wrapper-artessa").on("shown.bs.modal", function(e) {
                    google.maps.event.trigger(map, "resize");
                    return map.setCenter(thisLatLng);
                  });

                  $('#directionsButtonArtessa').click(function() {
                    calcRouteArtessa();
                  });


                  var directionsDisplay;
                  var directionsService = new google.maps.DirectionsService();
                  var map;
                  var thisLatLng = new google.maps.LatLng(47.728013, -122.242716);


              function initialize() {
                  console.log("initialize says hello");
                  directionsDisplay = new google.maps.DirectionsRenderer();
                  var mapOptions = {
                        zoom: 13,
                        center: thisLatLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        disableDefaultUI: false
                  };

                  map = new google.maps.Map(document.getElementById("map-wrapper-artessa"), mapOptions);
                  directionsDisplay.setMap(map);
                  directionsDisplay.setOptions ({
                      suppressMarkers: true
                  });
                  directionsDisplay.setPanel(document.getElementById("directions-wrapper-artessa"));

                  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 marker = new google.maps.Marker({
                      position: thisLatLng,
                      map: map,
                      title:"Artessa Kirkland",
                      icon: image,
                  });

                  marker.setMap(map);


                  var myRoute = directionResult.routes[0].legs[0];

                  var point = myRoute.steps[i].start_point;
                  var startIcon = new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png");
                  startIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

                  var marker = new google.maps.Marker({
                      position: startLatLng,
                      map: map,
                      icon: startIcon,
                  });

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

               }    // END INITIALIZE


            function calcRouteArtessa() {
                  console.log("calcRouteArtessa says hello");
                  var start = document.getElementById("startAddressArtessa").value;
                  var end = "7478 NE 141st Street, Kirkland, WA 98034";

              var request = {
                      origin: start,
                      destination: end,
                      travelMode: "DRIVING"
              };

              directionsService.route (request, function (result, status) {

                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(result);
                } else {
                  alert ("Directions was not successful because the starting location was " + status);

                }   // END IF


              }); // End Function


            } // END calcRoute

        });     // end function

Open in new window

Julian Hansen

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

Open in new window

Take async out

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

Open in new window

dlearman1

ASKER

Julian... Please take another look. I neglected to upload the latest version to the live link.

Changes:

I converted the small "0nload" map to a real Google static map loading through an HTML img tag. so I no longer have the <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALGcS8tFxXL6eMp2O7rGbl6voJdXlaSLk&callback=initMap"></script>

I replaced it with this getScript code:

 $(function() {
                  $('#googleMapLgModalArtessa').on('shown.bs.modal', function() {
                      $.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyALGcS8tFxXL6eMp2O7rGbl6voJdXlaSLk&callback=initialize",function(data, status) {
                            console.log( data );
                            console.log( status );
                        });
                  });
.
.
.
 });     // end function

The script load looks good, but I'm getting the "invalid function" error on the callback function initialize.  

Greatly appreciate your help.

Open in new window

Julian Hansen

I suspect the problem is here

               $('#googleMapLgModalArtessa').on('shown.bs.modal', function() {
                      $.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyALGcS8tFxXL6eMp2O7rGbl6voJdXlaSLk&callback=initialize",function(data, status) {
                            console.log( data );
                            console.log( status );
                        });
                  });

Open in new window

You are initialising your map in document ready but only loading the map script when you open the modal.

Why are you doing it like that - why not just put the map script in <script> tags?

dlearman1

ASKER

The problem I'm trying to ensure that the map will not attempt to be drawn before the modal is open. The modal is opened by a user button click. If it's just in script tags it will execute immediately. That's my understanding anyway.

dlearman1

ASKER

Could I put the map script in <script> tags, but not include any callback function, or maybe an empty callback function. Would this load the script but defer execution until the modal is "shown"? Does Google require a callback function? I couldn't find any thing on this, so I'm assuming a callback is needed.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

It worked with a dummy callback that just wrote to the console log. I didn't try with no callback.

Thanks... again

Julian Hansen

You are welcome.