Tengo un proyecto que consiste en mostrar un mapa de Google con información relacionada con los lugares de la ciudad (puntos de interés, como la escuela, el restaurante, el metro, ...) Pero primero tengo que aprender a usar la API.

Tengo dificultades para mostrar un marcador simple, de hecho, tengo "Error de referencia no detectado: google no está definido" en la consola de Chrome y el marcador no aparece. Busqué por todas partes en el foro pero nada me ayudó.

Te proporciono mi pequeño código HTML:

    <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p> TEST MAP </p>
<div id="map" style="height: 500px; width:900px;"></div>



<script type="text/javascript" src="test.js"></script>

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

<!-- Si le script n'est pas lu par le navigateur -->
<noscript>
    <p>Attention : </p>
    <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
    <p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
    <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>

</body>
</html>

Entonces, este es mi código Javascript:

    var maCarte;

    function initMap() {
        var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
      }
      maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);
    }

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
                        position: {lat: 43.4810896, lng: -1.540436}, 
                        map: maCarte
                    };

    var marqueur = new google.maps.Marker(optionsMarqueur);  
0
m.planchon 10 may. 2016 a las 17:05

3 respuestas

La mejor respuesta

Google Maps se carga asynchronously, incluso si incluye la etiqueta del script directamente. Por lo tanto, no use ninguna clase google.maps (como google.maps.Marker) hasta dentro de su devolución de llamada (que ha especificado que es initMap).

Modifique test.js para que su marcador se cree dentro de su devolución de llamada initMap.

También estaba usando maCarte mientras todavía era undefined. Por lo tanto, debe agregar su marcador al mapa (maCarte) solo después de haberlo creado:

    var maCarte;
    var marqueur

function initMap() {

    var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
    }

    maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
        position: {lat: 43.4810896, lng: -1.540436}, 
        map: maCarte
    };

    marqueur = new google.maps.Marker(optionsMarqueur); 
} 

Entonces, no importa si incluye test.js antes o después de su etiqueta de script de Google Maps.

2
Adam 10 may. 2016 a las 14:41

Necesita cargar googleapis antes de cargar su código de prueba.

Editar: ¿Puedes moverlos a la cabeza también?

<script defer  src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"></script> 
<script defer type="text/javascript" src="test.js"></script>

Async y diferir hacen dos cosas diferentes, no debes ponerlas en la misma etiqueta de script.

Async descarga el archivo durante el análisis HTML y pausará el analizador HTML para ejecutarlo cuando haya finalizado la descarga.

Aplazar descarga el archivo durante el análisis HTML y solo lo ejecutará después de que el analizador se haya completado.

1
Tipster74743 10 may. 2016 a las 14:39

Utiliza el atributo asíncrono y diferido:

  • asíncrono: cargar script asincrónico

  • aplazar: ejecutar al final

Pero su test.js es síncrono de carga y ejecución: antes de google maps sdk, por consiguiente, google no está definido

http://www.w3schools.com/tags/att_script_async.asp

http://www.w3schools.com/tags/att_script_defer.asp

1
Jules Goullee 10 may. 2016 a las 14:13