Error Uncaught ReferenceError: google is not defined y cómo solucionarlo

Regresamos con los tips rápidos y en esta ocasión tenemos un error bastante común al trabajar con Google Maps, más específicamente a nivel de API. Uncaught ReferenceError: google is not defined.

¿Por qué aparece recibimos este error al trabajar con Google Maps? Es bastante simple: Normalmente los scripts de Google, los cargamos de forma «asincrónica».

¿Qué quiere decir esto? Que de forma inicial, debe descargarse TODO el script y luego, deberíamos ejecutar el código que haga uso de la API de Google. Justo en ese orden.

Siguiendo con el ejemplo anterior, esto podría dar error:

<!-- Google Maps | API DE GOOGLE MAPS -->

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



<!-- Script para inicializar un mapa -->

<script type="text/javascript">

 var uluru = {
     lat: parseFloat("{{ $inmueble->latitude }}"),
     lng: parseFloat("{{ $inmueble->longitude }}")
 };
     
     var map = new google.maps.Map(
         document.getElementById("mapa"), {zoom: 15, center: uluru}
     );
     var marker = new google.maps.Marker({position: uluru, map: map});
 }

 </script>

Lo anterior, dará error, porque el segundo script, se cargará primero.

La forma correcta de hacerlo:

<!-- Google Maps | API DE GOOGLE MAPS -->

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



<!-- Script para inicializar un mapa -->

<script type="text/javascript">
function initialize() {
        var uluru = {
            lat: parseFloat("{{ $inmueble->latitude }}"),
            lng: parseFloat("{{ $inmueble->longitude }}")
        };
        var map = new google.maps.Map(
            document.getElementById("mapa"), {zoom: 15, center: uluru}
        );
        var marker = new google.maps.Marker({position: uluru, map: map});
    }
</script>

Como podrás ver, lo que hacemos es hacer uso de una función callback que se ejecuta, cuando el script, se ha cargado por completo.

Es una solución simple y funcional. ?

Compartir es amor.

#HappyCoding