Afficher une carte leaflet dans un code PHP

Bonjour,

J'ai créer une carte leaflet sur un fichier séparer et je voudrais maintenant l'intégrer dans mon code PHP. Le fichier de la carte web et un fichier PHP donc on devrait faire

Code:

include ('maps.php');

mais cela ne marche pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div id="map">
	    <!-- Ici s'affichera la carte -->
		</div>
 
        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script>
            // On initialise la latitude et la longitude de Paris (centre de la carte)
            var lat = 48.837579;
            var lon = -1.597302;
                        var latM;
                        var lonM;
            var macarte = null;
                        
            window.onload = function()
                                                        {
                                                        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                                        initMap(); 
                                                        };      
                                        
                        // Fonction d'initialisation de la carte
                        function initMap() 
                        {
                                console.log("init lance")
                                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                                macarte = L.map('map').setView([lat, lon], 11);
                                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                        {       // Il est toujours bien de laisser le lien vers la source des données
                                                attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
                                                minZoom: 1,
                                                maxZoom: 20
                                        }).addTo(macarte);
                                requeteAjax();
                        };
                                        
                        function requeteAjax()
                        {
                                console.log("requeteAjax");
                                let id =document.getElementById("valeur").value.substr(7);
                                console.log(id);
                                if (id == "")
                                {
                                        console.log("Champs pas rempli !");
                                }
                                else
                                {
                                        var data = "Num_boitiers="+id;
                                        var url = "recupSQL.php";
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", url, true);
                                        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                        ajax.send(data);
                                        ajax.onreadystatechange = function() 
                                        {
                                                if (this.readyState == 4 && this.status == 200)
                                                {
                                                        console.log(this.responseText);
                                                        //On traite les données reçues
                                                        var data=JSON.parse(this.responseText);
                                                        console.log(data["Latitude"]);
                                                        var marqueur = L.marker([data["Latitude"], data["Longitude"]]).addTo(macarte);
                                                }
                                                else
                                                {
                                                        console.log(this.statusText);
                                                }       
                                        }
                                }
                                                // Nous ajoutons un marqueur
                                                //var marqueur = L.marker([lati, longi]).addTo(macarte);
                                                //marqueur.bindPopup("<p>Paris</p>");*/         
                        };
                                        
    </script>

et voici le code que j'ai mis sur ma page principale :

Code:

1
2
3
<?
	include('maps.php');
?>

Merci d'avance pour votre aide
Baptiste