v_recherche_carte.php

<div class='recherche' id='faireRecherche'>

    <form action="./?action=recherche&vue=carte" method="POST">
         <h2>Recherche</h2>
        <div class="choixPersAffichage" >
            <label><strong>Afficher :</strong></label><br/>
            <input type="radio" name="choixPersAffichage" id="choixPersAffichage" value="visiteur" <?php if($choixPersAffichage == 'visiteur') {?>checked <?php }?>>Visiteur
            <input type="radio" name="choixPersAffichage" id="choixPersAffichage" value="praticien" <?php if($choixPersAffichage == 'praticien') {?>checked <?php }?>>Praticien
        </div>
        <div class="choixTri">
            <label><strong>Trier par :</strong></label><br/>
            <input type="checkbox" name="dateVisite" onchange="if(this.checked) this.value='true'; else this.value='false';" <?php if($dateVisite ="true"){ ?> onchange="this.value='true'" <?php } ?> /> Date de visite
            <input type="checkbox" name="secteur"  onchange="if(this.checked) this.value='true'; else this.value='false';"> Secteur
            <br/>
            <input type="checkbox" name="region" onchange="if(this.checked) this.value='true'; else this.value='false';"/> Region
            <input type="checkbox" name="nom" onchange="if(this.checked) this.value='true'; else this.value='false';"/> Nom
            <br/>
            <input type="checkbox" name="notoriete"  onchange="if(this.checked) this.value='true'; else this.value='false';"/> Notoriété (que pour praticiens)
            <input type="checkbox" name="specialite"  onchange="if(this.checked) this.value='true'; else this.value='false';"/> Spécialité (que pour praticiens)
        </div>
        <br/>
        <div class="choixTexte">
            <label><strong>Localisation :</strong></label>
            <input type="text" name="localisation" <?php if(!empty($_POST['localisation'])){ ?> value = <?php echo($_POST['localisation']);} ?>><br/>
            <label><strong>Nom :</strong></label>
            <input type="text" name="nom" <?php if(!empty($_POST['nom'])){ ?> value = <?php echo($_POST['nom']);} ?>><br/>
            <label><strong>Spécialité : </strong>(que pour praticiens)</label>
            <input type="text" name="specialite" <?php if(!empty($_POST['specialite'])){ ?> value = <?php echo($_POST['specialite']);} ?>><br/>
            <label><strong>Notoriété : </strong>(que pour praticiens)</label>
            <input type="text" name="notoriete" <?php if(!empty($_POST['notoriete'])){ ?> value = <?php echo($_POST['notoriete']);} ?>><br/>
        </div>
        <div class="choixAfficher">
            <h3>Afficher les résultats :</h3>
            <a class='btnListe' id="btnListe"><button>image Liste</button></a>
            <a class='btnMaps' id="btnMaps"><button>image Maps</button></a>
        </div>
        <input type="submit" value="Rechercher">
    </form>
</div>

<div class='rechercheAffichage' id="rechercheAffichage">


    <br/>
    <br/>
    <div id="map"></div>
    <script type="text/javascript">

        // New York
        var startlat = 48.864716;
        var startlon = 2.349014;

        var options = {
         center: [startlat, startlon],
         zoom: 9
        }

        var map = L.map('map', options);
        var nzoom = 12;

        //L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'}).addTo(map);
        var Hydda_Full = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'OSM'
        }).addTo(map);

        // Liste dans laquelle on va rentre toutes les adresses des praticiens
        var listePraticiens = <?php echo json_encode($listePraticiens);?>;
        console.log(listePraticiens);
        var listeAdresses = [];
        var nouvelleAdresse = 0;
        var rowsLA = <?php if(isset($listePraticiens)) {echo count($listePraticiens);} else {echo 0;}?>;
        console.log("Nombre de lignes : " + rowsLA);
        var colsLA = 2;

        // Création des lignes de la liste d'adresses
        for( var i=0; i<rowsLA; i++ ) {
          listeAdresses.push( [] );
        }

        // Création des colonnes de la liste d'adresses
        for (var i = 0; i < rowsLA; i++)
        {
            for (var j =  listeAdresses[i].length; j < colsLA; j++)
            {
                listeAdresses[i].push(0);

                if (listePraticiens[i].longitude == null || listePraticiens[i].latitude == null) {
                    // On génère l'adresse complète pour rechercher sa longitude/latitude
                    if (listePraticiens[i].numRue == 0) {
                        var inp = listePraticiens[i].rue + ', ' + listePraticiens[i].cp + ' ' + listePraticiens[i].ville;
                    } else {
                        var inp = listePraticiens[i].numRue + ' ' + listePraticiens[i].rue + ', ' + listePraticiens[i].cp + ' ' + listePraticiens[i].ville;
                    }
                    setTimeout(function(){addr_search(inp)}, 2000);
                    console.log(i + "g : " + inp);

                } else { // Longitude & latitude déjà renseignées dans la BDD
                    listeAdresses[i][0] = listePraticiens[i].latitude;
                    listeAdresses[i][1] = listePraticiens[i].longitude;
                }
                //addr_search(inp);
            }
        }


        var myMarker = L.marker([startlat, startlon], {title: "Coordinates", alt: "Coordinates", draggable: false}).addTo(map).on('dragend', function() {
         var lat = myMarker.getLatLng().lat.toFixed(8);
         var lon = myMarker.getLatLng().lng.toFixed(8);
         var czoom = map.getZoom();
         if(czoom < 18) { nzoom = czoom + 2; }
         if(nzoom > 18) { nzoom = 18; }
         if(czoom != 18) { map.setView([lat,lon], nzoom); } else { map.setView([lat,lon]); }
         document.getElementById('lat').value = lat;
         document.getElementById('lon').value = lon;
         myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
        });

        function chooseAddr(lat1, lng1)
        {
         myMarker.closePopup();
         map.setView([lat1, lng1],18);
         myMarker.setLatLng([lat1, lng1]);
         lat = lat1.toFixed(8);
         lon = lng1.toFixed(8);
         document.getElementById('lat').value = lat;
         document.getElementById('lon').value = lon;
         myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
        }

        function myFunction(arr)
        {
         var i;

         if(arr.length > 0)
         {

          //chooseAddr(arr[0].lat, arr[0].lon);
          console.log(arr);
          listeAdresses[nouvelleAdresse][0] = arr[0].lat;
          listeAdresses[nouvelleAdresse][1] = arr[0].lon;
          nouvelleAdresse = nouvelleAdresse+1;
          console.log(arr[0].lat + ", " + arr[0].lon);
          // Ajout sur la carte des markers
          for (var i = 0; i < listeAdresses.length; i++) {
              marker = new L.marker([listeAdresses[i][0],listeAdresses[i][1]])
                .bindPopup(listeAdresses[i][0])
                .addTo(map);
          }

          /*
          for(i = 0; i < arr.length; i++) {
           out += "<div class='address' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
          }
          document.getElementById('results').innerHTML = out;
          */
         }
         else
         {
          document.getElementById('results').innerHTML = "Sorry, no results...";
         }
        }

        function addr_search(inp)
        {
         //var inp = document.getElementById("addr");
         var xmlhttp = new XMLHttpRequest();
         var url = "http://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + inp;
         xmlhttp.onreadystatechange = function()
         {
           if (this.readyState == 4 && this.status == 200)
           {
            var myArr = JSON.parse(this.responseText);
            //console.log(myArr);
            myFunction(myArr);
           }
         };
         xmlhttp.open("GET", url, true);
         setTimeout(function(){xmlhttp.send()}, 20000);
         console.log(inp);

        }
    </script>
</div>