Sé que se ha hecho esta pregunta. Pero todavía no puedo superarlo. Simplemente estoy tratando de cargar la API de googlemaps en js fiddle. No puedo superar el error: initMap no es una función. Mi jsfiddle aquí: jsfiddle

Mi código:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });

Html:

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
    </script>

Cuando tengo la función initmap () {} (con corchetes) el mapa no se carga y aparece el error. Cuando elimine el function initmap{} y solo:

var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 34.397, lng: 150.644 },
    scrollwheel: false,
    zoom: 2
});

El mapa se carga, sin embargo, sigo recibiendo el error:

InitMap no es una función

Podría tener algo que ver con una devolución de llamada. Hace tiempo que no escribo javascript. Pero solo necesito superar este error. Gracias

4
EB. 9 dic. 2016 a las 20:26
¿Es un error al copiar o no cerró initMap correctamente?
 – 
Stefan
9 dic. 2016 a las 20:35

6 respuestas

Aquí hay un JSFiddle de cómo funciona.

Básicamente, coloque su función encima de la llamada a Google API

<script>
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    } // close function here
    </script>
    <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
        </script>

Además, la función no se cerró correctamente.

12
Stefan 9 dic. 2016 a las 20:38

TL; DR

En el violín, tiene un error de sintaxis al no cerrar iniMap() con }. Además, la función se define después de que se cargue el DOM. Para arreglar esto:

  • establecer el tipo de carga para envolver en <body> o <head>
  • corregir error de sintaxis

fix

He aquí cómo lidiar con estos.

Alcance global

Coloque initMap en el ámbito global. no envuelva la definición de la función dentro de un ámbito privado o anónimo como

(function(){

function initMap(){
    //
}

})();

Carga DOM

Defina la función en <head> si es posible. o al menos antes de cargar la API en <body>. Y nunca defina initMap después de que el dom se cargue por completo como window.onload y document.addEventListener('ondomready', callback)

Buena práctica

<script>
function initMap(){
  //
}
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Malas prácticas:

window.onload

<script>
window.onload = function(){
  function initMap(){
     //
  }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Y

<script>
document.addEventListener('ondomready', function(){
  function initMap(){
     //
  }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

O $(function(){ }) si estás usando jQuery

<script>
$(function(){
  function initMap(){
     //
  }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
11
Adam Azad 9 dic. 2016 a las 20:40

He estado buscando una respuesta en muchos foros, pero descubrí que en mi código había un ';' perdido. Después de eliminar el ';' todo funcionó bien.

Sé que no es la mejor respuesta, pero espero que ayude a alguien.

2
CarlosZ 19 jun. 2018 a las 06:37

Está llamando a initMap antes de que se declarara.

https://jsfiddle.net/mp7j7gy0/60/

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"> </script>

var initMap = function() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });
}

initMap()
2
Atul Baldaniya 8 dic. 2018 a las 07:26

También me encontré con este problema, pero en mi caso, el culpable parece ser mod_pagespeed.

Creo que modifica el orden de los scripts en la página, por lo que las soluciones anteriores no funcionaron. Me las arreglé para resolverlo agregando dinámicamente la etiqueta script del mapa.

<script>
    function initMap() {
        // some code
    }

    // dynamically add your map
    var tag = document.createElement('script');
    tag.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap";
    tag.defer = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
1
Stephen Rauch 3 may. 2018 a las 03:27

Estaba usando leaflet.js y Google me dio esto como mi secuencia de comandos predeterminada

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

Básicamente, simplemente elimine el parámetro de cadena de consulta de devolución de llamada porque se supone que el folleto debe llamarlo.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCL6DiC25wgfa9oZKOn6TovyDgHWDnQLeo"></script>
0
Enkode 20 sep. 2021 a las 19:55