[Résolu] API googlemap geolocalisation par PaulLaguës - page 1

Bonjour,en formation de develloppeur, je dois faire un projet avec de la geolocalisation.

J'ai donc utiliser l'API google maps (code ci dessous) qui va chercher dans une base de données des coordonnées GPS (longitude, latitude) et qui récupère un fichier xml, le souci est que aucun marqueur d'apparait sur la carte et je ne sais pas du tout pourquoi...

J'ai l'erreur "Uncaught ReferenceError: type is not defined" mais je recois bien le resultat de ma requete AJAX qui parse le xml.(voit image ci dessous)

ligne 62 de l'erreur : var icon = customLabel[type] || {};

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(48.390394,-4.486076),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('http://localhost/ProjectSymfony/API%20GOOGLE/connexion%20AJAX.php', function(data) {
            console.log(data)
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var nom = markerElem.getAttribute('nom');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('latitude')),
                  parseFloat(markerElem.getAttribute('longitude')));

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

              var text = document.createElement('text');
              text.textContent = nom
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
             })
             })
        }

      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=AIzaSyBpqu5V4y4bEgbvlTfJyQd5hKhsq2No2s4&callback=initMap">
    </script>

  </body>
</html>

Merci de votre aide

-
Edité par PaulLaguës 23 mai 2018 à 21:35:53

API googlemap geolocalisation

API googlemap geolocalisation

Supprimer

Modérer

Signaler le message aux modérateurs