Maps loading error with google maps api

Asked

Viewed 906 times

0

I am working on a web project that uses the maps api, however, in some moments, the system returns with the following error and the map did not open:

Uncaught Eb message: "initMap is not a Function"name: "Invalidvalueerror"stack: "Error at new Eb

At other times, the map opens normally. Does anyone have any idea what might be happening and how can I fix it? In my script there is no variable with the name Eb.

In HTML I define a div that will load the map 

<div id="map" class="pull-right"></div>

So I import the map

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

And I set the initMap function in a script on the same htlm page.

function initMap(){
        // Definição do ponte de inicialização do mapa
        var myLatLng = new google.maps.LatLng(-5.843470, -36.619855);

        // Definição das configurações visuais do mapa
        var mapOptions = {
            zoom: 8,
            center: myLatLng,
            styles: [
                { 
                    featureType: 'road',
                    elementType: 'all',
                    stylers:[{visibility: 'off'}]
                },
                {
                    featureType: 'water',
                    elementType: 'all',
                    stylers:[{color: '#ffffff'}]
                },
                {
                    featureType: 'landscape',
                    elementType: 'all',
                    stylers:[{color: '#ffffff'}]
                }
            ]
        }

        // Instanciando o mapa com as configurações defidas dentro de uma div cujo id está especificado na instrução
        var map = new google.maps.Map(document.getElementById('map'),mapOptions);   
        var geocoder = new google.maps.Geocoder;
}

Within the script there are other definitions of variables and function. However, I only added this because it is the one that will initialize the map. Within the initMap function is also defined several polygons and the events of each Poligono.

javascript web-application maps

  • Put the code there for us to help you, preferably your HTML and Javascript.

  • I added more information of the problem. Please take a look. Thank you.

1 answer

0


The Google Maps API did not find the "initMap()" function, as it must have loaded before, due to the "async" attribute. Try to remove this attribute to see if it solves. If it doesn’t, set the function before the API call. See some important points also below:

  1. Set API loading at end of <body> and arrange the call because it’s wrong ?key=??????=places&callback=initMap. The parameters are formed by key and value, for example: callback (key) and initMap (value). However the value "Places", you did not define the key, which is "Libraries". Being correct thus: ?key=??????&libraries=places&callback=initMap.
  2. Create your "initMap()" function before loading the API, as in the example I did on Jsbin.

  • It worked. I put the API loading at the end of <body>, after the setting of the initMap function and it worked. No more returning error. Solved. Thanks....

  • Opa, wonder. Mark the answer as correct doing please. Thank you.

Browser other questions tagged javascript web-application maps

You are not signed in. Login or sign up in order to post.