11521 sujets

JavaScript, DOM et API Web HTML5

Impossible de cliquer sur marker maps

Bonjour à tous,

Bon voilà tout est dans le titre. C'est un store locator qui fonctionne presque... La recherche fonctionne en fonction d'un rayon, impeccable. Par contre les markers sur la carte ne sont pas cliquables et je n'arrive pas comprendre pourquoi.

Je pense pour un problème de z-index mais j'ai supprimé au fur et mesure tous les éléments de ma page avec l'inspecteur et les markers restaient incliquables.

Je ne pense pas que ce soit utile mais ici la doc google
https://developers.google.com/maps/articles/phpsqlsearch_v3?hl=fr

La partie principale du code lorsqu'on clique sur rechercher 


   function searchLocationsNear(center) {
     clearLocations();

     var central = document.getElementById('addressInput').value;
     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'MON_ADRESSE_PHP_POUR_AJAX.php?central=' + central +'&radius=' + radius;
     console.log(searchUrl)
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       if(markerNodes.length > 0){
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var id = markerNodes[i].getAttribute("id");
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       jQuery('#locationSelect').css({"display":"none","height":"0"})
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
       // ICI COMMENCE l'AFFICHAGE DES RESULTATS
        var insideResult = '';
        jQuery('#wrapper_result').empty();
        jQuery('#map').css('visibility','hidden');
         for (var i = 0; i < markerNodes.length; i++) {
        var insideResult_ajax = '';
          var idPost_obj = markerNodes[i].getAttribute("id_post")+','+markerNodes[i].getAttribute("distance")
          idPost = String(idPost_obj);
          jQuery.ajax({
            type: 'POST',
            url: 'URL_AFFICHAGE_RESULTATS',
            dataType : 'text',
            data : {id_post : idPost},
            success: function(data) {
            insideResult_ajax = data;
            insideResult = insideResult + insideResult_ajax
            jQuery('#btn_search_spinner span').css('display','none')
            jQuery('#map').css('visibility','visible');
            if(i>1){
              var qty_result = i+' résultats correspondent à votre recherche'
            }else{
              var qty_result = i+' résultat correspond à votre recherche'
            }

            jQuery('#filter_search').css('display','flex');
            jQuery('#nb_result').html(qty_result)
            jQuery('#wrapper_result').html(insideResult)
          },
            error: function() {
              alert('La requête n\'a pas abouti'); }
          });
         }   
      }else{
        jQuery('btn_search_spinner span').css('display','none')
        jQuery('#filter_search').css('display','none');
        jQuery('#nb_result').empty()
        jQuery('#wrapper_result').empty()
        var no_result = '<div class="alert alert-warning" role="alert">Aucun r&eacute;sultat ne correspond à votre recherche</div>'
        jQuery('#wrapper_result').html(no_result)
      }
     });
   }


J'ai bien ce code pour la cliquabilité des markers : 

   function createMarker(latlng, name, address) {
      var html = "<b>" + name + "</b>";
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        alert('bonjour')
      });
      markers.push(marker);
    }


Le bloc html où se situe ma carte

  <div class="row">
    <div class="col-md-8">
      <div id="nb_result"></div>
      <div class="wrapper_general row" id="wrapper_result">
      </div>
    </div>    
    <div id="wrapper_map" class="col-md-4">
        <div><select id="locationSelect" style="width: 10%; height:0; visibility: hidden"></select></div>
        <div id="map" style="width: 100%; height: 400px"></div>
    </div>
  </div>


Je ne pense pas que le problème vienne du JS (ce n'est que mon avis) j'aimerai surtout trouver des pistes où chercher car je sèche depuis deux jours sur ce bug.

Merci
Modifié par Soxy95 (12 Apr 2018 - 10:37)
Merci de votre réponse par contre je ne vois pas trop quel problème il pourrait y avoir avec l'API_KEY si la map fonctionne et pour moi j'ai bien déclarer les variables globales( voire mon code ci-dessous )

De plus c'est vraiment le click sur le maker qu'il n'entend pas car je peux selectionner marker par marker avec le menu déroulant <select id="locationSelect"> et j'ai bien l'infowindow qui apparaît.

A savoir que dans ma version finales ce menu déroulant je le cache car je ne souhaite pas qu'il figure sur la page.

Voici le js complet je voulais juste éviter d'avoir un post long comme le bras Smiley smile 

<script type="text/javascript">
  var map;
  var markers = [];
  var infoWindow;
  var locationSelect;

    function initMap() {
      var sydney = {lat: 46.227638, lng: 2.213749};
      map = new google.maps.Map(document.getElementById('map'), {
        center: sydney,
        zoom: 5,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
      infoWindow = new google.maps.InfoWindow({
          optimized: false
      });

      searchButton = document.getElementById("searchButton").onclick = searchLocations;

      locationSelect = document.getElementById("locationSelect");
      locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');
        }
      };
    }

   function searchLocations() {
     var address = document.getElementById("addressInput").value;
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({address: address}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
        searchLocationsNear(results[0].geometry.location);
       } else {
         alert(address + ' not found');
       }
     });
   }

   function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;

     locationSelect.innerHTML = "";
     var option = document.createElement("option");
     option.value = "none";
     option.innerHTML = "See all results:";
     locationSelect.appendChild(option);
   }
   function searchLocationsNear(center) {
     clearLocations();

     var central = document.getElementById('addressInput').value;
     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'MON_ADRESSE_PHP_POUR_AJAX.php?central=' + central +'&radius=' + radius;
     console.log(searchUrl)
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       if(markerNodes.length > 0){
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var id = markerNodes[i].getAttribute("id");
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       jQuery('#locationSelect').css({"display":"none","height":"0"})
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
       // ICI COMMENCE l'AFFICHAGE DES RESULTATS
        var insideResult = '';
        jQuery('#wrapper_result').empty();
        jQuery('#map').css('visibility','hidden');
         for (var i = 0; i < markerNodes.length; i++) {
        var insideResult_ajax = '';
          var idPost_obj = markerNodes[i].getAttribute("id_post")+','+markerNodes[i].getAttribute("distance")
          idPost = String(idPost_obj);
          jQuery.ajax({
            type: 'POST',
            url: 'URL_AFFICHAGE_RESULTATS',
            dataType : 'text',
            data : {id_post : idPost},
            success: function(data) {
            insideResult_ajax = data;
            insideResult = insideResult + insideResult_ajax
            jQuery('#btn_search_spinner span').css('display','none')
            jQuery('#map').css('visibility','visible');
            if(i>1){
              var qty_result = i+' résultats correspondent à votre recherche'
            }else{
              var qty_result = i+' résultat correspond à votre recherche'
            }

            jQuery('#filter_search').css('display','flex');
            jQuery('#nb_result').html(qty_result)
            jQuery('#wrapper_result').html(insideResult)
          },
            error: function() {
              alert('La requête n\'a pas abouti'); }
          });
         }   
      }else{
        jQuery('btn_search_spinner span').css('display','none')
        jQuery('#filter_search').css('display','none');
        jQuery('#nb_result').empty()
        jQuery('#wrapper_result').empty()
        var no_result = '<div class="alert alert-warning" role="alert">Aucun r&eacute;sultat ne correspond à votre recherche</div>'
        jQuery('#wrapper_result').html(no_result)
      }
     });
   }


   function createMarker(latlng, name, address) {
      var html = "<b>" + name + "</b>";
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        alert('bonjour')
      });
      markers.push(marker);
    }

   function createOption(name, distance, num) {
      var option = document.createElement("option");
      option.value = num;
      option.innerHTML = name;
      locationSelect.appendChild(option);
   }

   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.responseText, request.status);
        }
      };

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

   function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
   }

   function doNothing() {}
Sujet clos
Aller à