GMAPS API can't find the function

Question

EDITED:

So basically what I'm doing is, I'm trying to implement GMAPS api on my website. For some reason the api callback can't find my function that is specified before the callback itself.

Callback is searching for a function called myMap, which is defined below.

After the function is defined I'm using jquery to append a script element with the api src to the end of the body element so that the script tag wouldn't run before the function.

For some random reason it does run before the function and can't find the myMap function that is needed for callback to work.

I have this code:

function myMap(){
                          var markers = [];
                          var dataLoc = document.getElementById("kaart");
                          var myLatlng = new google.maps.LatLng(58.88556,25.55722);
                          var mapC = document.getElementById("map-canvas");
                          var myOptions = {
                            zoom: 7,
                            center: myLatlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDoubleClickZoom: true
                          }
                          map = new google.maps.Map(mapC, myOptions);

                          map.addListener("dblclick", function(event) {
                            deleteMarkers();
                            addMarker(event.latLng);
                            kaart.setAttribute("data-lat", event.latLng.lat());
                            kaart.setAttribute("data-long", event.latLng.lng());
                            geocodeLatLng(event.latLng.lat(), event.latLng.lng(), kaart);
                            mapC.className += "disabled";
                            document.getElementById("editLoc").setAttribute("style","display: block !important;");
                          });
                          // Adds a marker to the map and push to the array.
                        function addMarker(location) {
                          var marker = new google.maps.Marker({
                            position: location,
                            map: map,
                            animation: google.maps.Animation.BOUNCE
                          });
                          markers.push(marker);
                        }

                        // Sets the map on all markers in the array.
                        function setMapOnAll(map) {
                          for (var i = 0; i < markers.length; i++) {
                            markers[i].setMap(map);
                          }
                        }

                        // Removes the markers from the map, but keeps them in the array.
                        function clearMarkers() {
                          setMapOnAll(null);
                        }

                        // Shows any markers currently in the array.
                        function showMarkers() {
                          setMapOnAll(map);
                        }

                        // Deletes all markers in the array by removing references to them.
                        function deleteMarkers() {
                          clearMarkers();
                          markers = [];
                        }
                          // Create the search box and link it to the UI element.
                          var input = document.getElementById("pac-input");
                          var searchBox = new google.maps.places.SearchBox(input);
                          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                          // Bias the SearchBox results towards current map\'s viewport.
                          map.addListener("bounds_changed", function() {
                            searchBox.setBounds(map.getBounds());
                          });

                          // Listen for the event fired when the user selects a prediction and retrieve
                          // more details for that place.
                          searchBox.addListener("places_changed", function() {
                            var places = searchBox.getPlaces();

                            if (places.length == 0) {
                              return;
                            }

                            // For each place, get the icon, name and location.
                            var bounds = new google.maps.LatLngBounds();
                            places.forEach(function(place) {
                              if (!place.geometry) {
                                console.log("Returned place contains no geometry");
                                return;
                              }
                              var icon = {
                                url: place.icon,
                                size: new google.maps.Size(71, 71),
                                origin: new google.maps.Point(0, 0),
                                anchor: new google.maps.Point(17, 34),
                                scaledSize: new google.maps.Size(25, 25)
                              };

                              if (place.geometry.viewport) {
                                // Only geocodes have viewport.
                                bounds.union(place.geometry.viewport);
                              } else {
                                bounds.extend(place.geometry.location);
                              }
                            });
                            map.fitBounds(bounds);
                          });
                          function geocodeLatLng(lat, long, kuhu) {
                            var geocoder = new google.maps.Geocoder;
                            var latlng = {lat: lat, lng: long};
                            geocoder.geocode({"location": latlng}, function(results, status) {
                              if (status === "OK") {
                                if (results[0]) {
                                  var addressComponents = results[0].address_components;
                                   for(i=0;i<addressComponents.length;i++){
                                      var types = addressComponents[i].types
                                      if(types=="locality,political"){
                                         kuhu.setAttribute("data-linn", addressComponents[i].long_name);
                                       }
                                     }
                                }
                              }
                            });
                          }

                          if (navigator.geolocation) {
                              navigator.geolocation.getCurrentPosition(successFunction);
                          } else {
                              alert();
                          }

                          function successFunction(position) {
                              var lat = position.coords.latitude;
                              var long = position.coords.longitude;
                              return {lat: lat, long: long};
                          }

                    }
                  $('body').append('<script src="https://maps.googleapis.com/maps/api/js?key={api key}&callback=myMap&libraries=places"></script>');

Here I'm adding a map with a markers and autocomplete search to my website. Also, I'm trying to get user's location.

For some reason the browser console gives me an error:

mc {message: "myMap is not a function", name: "InvalidValueError", stack: "Error↵    at new mc (https://maps.googleapis.com/m…g5xvGcoca0&callback=myMap&libraries=places:137:68"}

I'm not exactly sure why? I mean the function is already before the callback.

NB! The same exact code worked before, then suddenly everything stopped working.

Answer 1

Okay, I managed to fix it, it seems that my function wasn't in the global state.

I replaced this:

function myMap(){

with this:

window.myMap = function(){