0

Hola tengo una vista en html donde quiero meter un map de google, tengo todo en forma y linea, pero sigo teniendo este error

El script de “https://maps.googleapis.com/maps/api/js?key=MIAPIKEY&callback=initMap” fue cargado a pesar de que su tipo MIME (“text/html”) no es un tipo MIME de JavaScript válido.

este es mi código

<!DOCTYPE  >

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    mapa


<br>

<style>
#map {
    height: 400px; /* The height is 400 pixels */
    width: 90%; /* The width is the width of the web page */
    z-index: 99;
}</style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <div id="map" style="z-index:99;"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8
            });
        }

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


</body>
</html>
2
  • 2
    Puedes mostrarnos tu estructura del html? Influye mucho donde pongas la etiqueta script donde llamas a la api de Google Commented el 5 nov. 2019 a las 23:09
  • ¿De casualidad has probado en localhost (http y httpS) en google chrome y firefox?
    – fredyfx
    Commented el 6 nov. 2019 a las 21:26

1 respuesta 1

0

Quiero pensar y creer que ese response[i].sucursal que tienes en el código es porque tienes funcionando un bucle para generar todos los marcadores y que el código que has mostrado es un fragmento de todo lo que tienes.

En el siguiente código encuentras algunas diferencias que han sido comentadas

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="map"></div>
<script>
    function initMap() {
        var myLatLng = {
            lat: 19.053430,
            lng: -98.223228
        };

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
        });

        var markerx = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: response[i].sucursal
        });
    }
    //initMap(); Esto es innecesario porque en el callback de la URL lo estás llamando.
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MIAPIKEY&callback=initMap" async defer></script> 

Script async

El atributo async permite que el navegador descargue el archivo script asíncronamente(de ahí el nombre,sorprendente no?) y continuar con la interpretación del HTML, a penas termine con la descarga interrumpirá la interpretación para empezar la ejecución del script e inmediatamente después continuara con el proceso de interpretación.

Script defer

El atributo defer a diferencia de async, aplaza(defer) la ejecución del script después de que la interpretación del HTML ha concluido, la descarga se realiza de forma asíncrona igual que en el caso anterior pero defer nos GARANTIZA EJECUTAR LOS SCRIPTS EN EL ORDEN en el que aparecen en nuestro documento, a diferencia de async que los ejecuta a penas termina de descargar.

Estas definiciones vienen del sitio web de uno de los usuarios de SOes @Jesús Angulo: https://somostechies.com/async-vs-defer/

Documentación oficial de Google Maps: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/map-simple

4
  • agregue información a la pregunta Commented el 6 nov. 2019 a las 20:37
  • ¿Por qué no le pones el type al script?
    – fredyfx
    Commented el 6 nov. 2019 a las 20:56
  • usé type="text/javascript" pero persiste Commented el 6 nov. 2019 a las 21:01
  • ¿Sigue saliendo google is not defined JS?
    – fredyfx
    Commented el 6 nov. 2019 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.