En realidad el error está siendo generado por el initMap en el script api de Google

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

Así que básicamente cuando se carga la API de Google Map, se ejecuta la función initMap. Si no tiene una función initMap, entonces se genera el error initMap is not a function.

Así que básicamente lo que tienes que hacer es una de las siguientes opciones:

1. para crear una función initMap
2. reemplace la función de devolución de llamada con una de las suyas que creó para la misma propósito, pero lo llamó otra cosa
3. reemplace la &callback=angular.noop si solo desea una función vacía() (solo si usa angular)

Mi explicación de este problema:

El .....&callback=initMap" async defer></script> hace que ese script cargue async (en paralelo con DOM) y después de cargar - ejecutar la función initMap. OBSERVE que initMap () en el ámbito global! No podemos declarar nuestro initMap () después del script de google porque ya debería estar en el momento de finalizar la carga asíncrona. Aunque no podemos cargar nuestro script antes de esto, porque necesitamos la función de Google para ejecutar la nuestra. Esto es como vicioso circulo.

Tres soluciones:

1'st y peor: hacer que el script de Google se cargue sincrónicamente

1. eliminar async defer
2. eliminar {[4] {} en[5]} atributo
3. pon <script etiqueta con tu código después del script de Google

2'nd and best: just do this =)

1. deja .....&callback=initMap" async defer></script> como está
2. y poner la etiqueta de Google <script después de su script

3. Escribe en tu script

   function initMap() {} // now it IS a function and it is in global
   
   $(() => {
     initMap = function() {
       // your code like...
       var map = new google.maps.Map(document.getElementById('map'), {/*your code*/});
       // and other stuff...
     }
   })
   

   Esto te permite cargar google script async y ejecutar el tuyo justo después de eso

3'rd y extraño: funcionará... algunas veces =)

1. Haga lo mismo, pero simplemente escriba en el ámbito global

   function initMap() {
     // your code
   }
   

   Y si lo escribes en el ámbito global, funcionará independientemente de lo que qué código se carga más rápido, tu (sync) o el de Google (async). Más a menudo sus ganancias

He estado luchando durante varios días con este tema muy popular en los últimos meses: "initMap no es una función".

Esos dos hilos me ayudaron:

1. Cómo hacer una devolución de llamada a Google Maps init en archivos separados de una aplicación web

2. ¿El atributo Diferir no funciona con la API de Google Maps?

Por qué el mapa se abre a veces y a veces no. Depende de varios factores como la velocidad de conexión, medio ambiente, etc. Debido a que la función de inicialización a veces se ejecuta después de que se inicie la API de Google Maps, es por eso que el mapa no se muestra y la consola del navegador genera un error. Para mí, eliminar solo el atributo async solucionó el problema. El atributo diferir permanece.

Si está presente async: El script se ejecuta asincrónicamente con el resto de la página (el script se ejecutará mientras la página continúa el análisis) Si async no está presente y defer está presente: El script se ejecuta cuando la página ha terminado de analizar Si no está presente ni async ni defer: El script se obtiene y ejecuta inmediatamente, antes de que el navegador continúe analizando la página Fuente - http://www.w3schools.com/tags/att_script_defer.asp

Espero que eso ayude. Aclamaciones.

El problema tiene que ver con el atributo async en la etiqueta script. La Función de devolución de llamada está tratando de llamar a "initMap ()" cuando realmente no existe en el momento en que la solicitud terminó.

Para resolver esto coloqué el Script de la Api de Goole Maps debajo del script donde se declaró mi función initMap.

Espero que esto ayude

Eliminar =initMap funcionó para mí:

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

Esto puede parecer obvio, pero por si acaso: Si alguien colocó el código JS dentro de $(documento).listo así:

     $(document).ready(function() {
       ... Google Maps JS code ...
      }

Entonces ese es el problema porque usando async defer al cargar la biblioteca API de Google Maps, se cargará de forma asíncrona, y cuando termine de cargarse, buscará la función de devolución de llamada, que debe estar disponible para entonces.

Por lo tanto, solo tiene que poner el código fuera $(documento).listo, y:

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

En la parte inferior, así que su página se carga RÁPIDAMENTE: -)

Resuelto añadiendo

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&callback=initMap">
    <!--
        https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
    -->
</script>

Al principio del mismo archivo que contiene el resto del código con function initMap(). Definitivamente no es la mejor solución, pero funciona..

Pero creo que si se transformara function initMap() a algo como var=initMap() y luego $(function () ... también funcionaría.

Estoy usando React y había mencionado &callback=initMap en el script como se muestra a continuación

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

Entonces se acaba de quitar la parte &callback=initMap ahora no hay tal error como ventana.initMap no es una función en la consola.

Pon esto en tu cuerpo html (tomado del angular oficial.js website):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Creo que estabas usando algún angular más antiguo.archivos js ya que no tiene ningún problema en plunker y, por lo tanto, obtuvo el error especificado.

Cree el método initMap entre la etiqueta "" o cargue el archivo javascript antes de llamar a la api de Google.

<script src="Scripts/main.js"></script>

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

Podría ser que su función initMap esté en un document(documento).función lista. Si lo es, entonces no funcionará, tiene que estar fuera de cualquier otra función.

Además de @DB.Respuesta de Null, usé Function.prototype como función no-op (no-operation) en #3 en lugar de angular.noop (no tengo angular en mi proyecto).

Así que esto...

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=Function.prototype" type="text/javascript"></script>

En mi caso hubo un problema de formato anteriormente, por lo que el error fue una consecuencia de otra cosa. Mi servidor estaba renderizando los valores lat/lon con comas en lugar de puntos, debido a diferentes configuraciones regionales.

En mi caso lo resolví así:

function initMap() {
    if($('#map').length > 0) {
        // your code
    }
}

Su método de devolución de llamada probablemente no es accesible globalmente. en mi caso había utilizado transpoiled ES6 códigos a través de webpack que causó mi método de devolución de llamada ya no es global.

Intente adjuntar su método de devolución de llamada explícitamente a window de la misma manera justo después de la declaración de su método de devolución de llamada y vea el resultado

window.initMap = initMap;

Funcionó para mí.