Error loading maps with api google maps

0

I'm working on a web project that uses api maps, however, sometimes the system returns with the following error and the map does 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 an idea of what is happening and how can I resolve it? In my script there is no variable named Eb.

In HTML I define a div that will load the map

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

Dai I care about the map

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

And I define 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 variable and function definitions. However I added only this one because it is the one that will initialize the map. Within the initMap function is also defined several polygons and the events of each polygon.

    
asked by anonymous 07.12.2016 / 17:55

1 answer

0

The Google Maps API did not find the "initMap ()" function, because it must have loaded before because of the "async" attribute. Try to remove this attribute to see if it works. If not, set the function before the API call. Here are some important points below:

  • Set the API load at the end of <body> and arrange the call because ?key=??????=places&callback=initMap is wrong. The parameters are formed by key and value, for example: callback (key) and initMap (value). But the value "places", you did not define the key, which is "libraries". This is correct: ?key=??????&libraries=places&callback=initMap .
  • Create your "initMap ()" function before loading the API, as in the example I did in JSBin .
  • 08.12.2016 / 12:14