Erreurs dans la console lors de l'utilisation de Google Maps: Uncaught ReferenceError: l'icône n'est pas définie

Question

J'ai essayé de suivre le tutoriel de Google pour implémenter Google Maps avec MySQL et PHP. Voici mon code:

<div class="container"> 
    <div id="map"> 

    </div> 
</div> 
<script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(XX.XXX, XX.XXX), 
     zoom: 12 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP or XML file 
     downloadUrl('http://xxxxxx.com/xxxxxxxx.php/', function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName('marker'); 
     Array.prototype.forEach.call(markers, function(markerElem) { 
      var id = markerElem.getAttribute('id'); 

      var point = new google.maps.LatLng(
       parseFloat(markerElem.getAttribute('lat')), 
       parseFloat(markerElem.getAttribute('lng'))); 

      var infowincontent = document.createElement('div'); 
      var strong = document.createElement('strong'); 
      strong.textContent = id 
      infowincontent.appendChild(strong); 
      infowincontent.appendChild(document.createElement('br')); 

      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      label: icon.label 
      }); 
      marker.addListener('click', function() { 
      infoWindow.setContent(infowincontent); 
      infoWindow.open(map, marker); 
      }); 
     }); 
     }); 
    } 



    function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
    } 

    function doNothing() {} 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&callback=initMap"> 
</script> 

J'ai suivi avec succès le tutoriel par le point de créer un script PHP qui crée les données XML et je demande que les données dans la fonction downloadURL. Mais, le tutoriel est basé sur l'utilisation d'un fichier XML statique. Je pense qu'il y a quelque chose que je dois changer pour que les marqueurs apparaissent sur la carte. Quand j'ouvre la console sur ma page, Im obtenir les erreurs suivantes:

Uncaught ReferenceError: icône n'est pas définie

à profile.php: 57

à HTMLCollection.forEach()

à profile.php: 41

à XMLHttpRequest.request.onreadystatechange (profile.php: 77)

Toutes les idées sur la façon de résoudre t ces erreurs? J'ai été bloqué dessus pendant des heures. Merci d'avance!

Answer 1

Votre code ne définit pas icon. Changement:

var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    label: icon.label 
    }); 

Pour:

var marker = new google.maps.Marker({ 
    map: map, 
    position: point 
    });