Marker Cluster ne fonctionne pas correctement

**salamaabdelhakim** · 13/03/2018, 12h31

J'essaye de mettre en MarkerCluster dans un page web avec le code ci-dessous mais ne fonctionne pas. Quand j'essaye d'exécuter ceci, il affiche le Marqueur mais ce n'est pas Clustering les Marqueurs. J'ai essayé de résoudre ce problème mais j'ai échoué. Quelqu'un peut-il m'aider à résoudre ce problème?

j'ai vu beaucoup de solution, mais malheureusement il n'y a pas de solution à mon problème

fichier map.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
// necessary variables
var map;
var infoWindow;
var markersData=[];
 
function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(32,-6),
      zoom: 7,
      mapTypeId: 'roadmap',
   };
 
   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
                var markerCluster = new MarkerClusterer(map, markerArray, {imagePath: '../images/m'});
 
   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();
 
   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });
 
   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
 
 
// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){
 
   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();
 
   // for loop traverses markersData array calling createMarker function for each marker 
   $.get("http://localhost/innotech/inc/get_data_google_api.php", function(response) { 
    markersData = JSON.parse(response);
    //console.log(response);
 
 
   for (var i = 0; i < markersData.length; i++){
 
      var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);
      var Route = markersData[i].Route;
      var Secteur = markersData[i].Secteur;
      var Agence = markersData[i].Agence;
      var CodeClient = markersData[i].CodeClient;
      var PrecisionGPS = markersData[i].PrecisionGPS;
      var Latitude = markersData[i].Latitude;
      var Longitude = markersData[i].Longitude;
      var BarCode = markersData[i].BarCode;
      var PrenomClient = markersData[i].PrenomClient;
      var NumAdresse = markersData[i].NumAdresse;
      var Tel = markersData[i].Tel;
      var Whatsapp = markersData[i].Whatsapp;
      var NbrFrigo = markersData[i].NbrFrigo;
      var OpenAm = markersData[i].OpenAm;
      var CloseAm = markersData[i].CloseAm;
      var OpenPm = markersData[i].OpenPm;
      var ClosePm = markersData[i].ClosePm;
      var OpenAmVen = markersData[i].OpenAmVen;
      var CloseAmVen = markersData[i].CloseAmVen;
      var OpenPmVen = markersData[i].OpenPmVen;
      var ClosePmVen = markersData[i].ClosePmVen;
      var OpenAmDim = markersData[i].OpenAmDim;
      var CloseAmDim = markersData[i].CloseAmDim;
      var OpenPmDim = markersData[i].OpenPmDim;
      var ClosePmDim = markersData[i].ClosePmDim;
      var IMEI = markersData[i].IMEI;
      var Date_Added = markersData[i].Date_Added;
 
      createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added);
 
      // marker position is added to bounds variable
      bounds.extend(latlng); 
 
	    var markerCluster = new MarkerClusterer(map, markersData,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
   }
 
   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
 
   });
}
// This function creates each marker and it sets their Info Window content
function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: CodeClient
   });
 
 
  markerArray.push(markersData); //push local var marker into global array
 
 
   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {
 
 
		var dicoFrigosDetails={};
 
 
		var HTMLtext="";
		for(var i=1; i<= Object.keys(dicoFrigosDetails).length / 4; i++){
		   HTMLtext += '';
		}
      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">Code Client : ' + CodeClient + 
			'</div>' + '<div class="iw_content">Précision : ' + PrecisionGPS + 
			'<br />Latitude : ' + Latitude + 
			'<br />Longitude : ' + Longitude + 
			'<br />Route : ' + Route + 
			'<br />Secteur : ' + Secteur + 
			'<br />Agence : ' + Agence + 
			'<br />Code-barres : ' + BarCode +
			'<br />prenom de Client : ' + PrenomClient + 
			'<br />Num Adresse : ' + NumAdresse +
			'<br />Téléphone : ' + Tel +
			'<br />Whatsapp : ' + Whatsapp +
			'<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +
			'<br />Ouverture Matin : ' + OpenAm +
			'<br />Fermeture Matin : ' + CloseAm +
			'<br />Ouverture après-midi : ' + OpenPm +
			'<br />Fermeture Après-midi : ' + ClosePm +
			'<br />Ouverture Matin Ven : ' + OpenAmVen +
			'<br />Fermeture Matin Ven : ' + CloseAmVen +
			'<br />Ouverture après-midi Ven: ' + OpenPmVen +
			'<br />Fermeture après-midi Ven: ' + ClosePmVen +
			'<br />Ouverture Matin Dim : ' + OpenAmDim +
			'<br />Fermeture Matin Dim : ' + CloseAmDim +
			'<br />Ouverture après-midi Dim : ' + OpenPmDim +
			'<br />Fermeture après-midi Dim : ' + ClosePmDim +
			'<br />IMEI : ' + IMEI + 
			'<br />Date Passage : ' + Date_Added + 
			'</div>';
 
      // including content to the Info Window.
      infoWindow.setContent(iwContent);
 
      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
 
 
}

fichier style.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html {
	height: 100%;
	background: gray;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#map-canvas {
	height: 100%;
}
#iw_container .iw_title {
	font-size: 16px;
	font-weight: bold;
}
.iw_content {
	padding: 15px 15px 15px 0;
}

fichier index.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
      <title>InnoTech - Map - Server</title>
  	<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js??key=********************************&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
	<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
 
    <script type="text/javascript" src="js/map.js"></script>
 
  </head>
  <body>
    <div id="map-canvas"/>
 
  </body>
</html>

pour l'URL (http: //localhost/innotech/inc/get_data_google_api.php) que vous trouverez dans le fichier map.js
c'est l'URL qui renvoie toutes les données dont j'ai besoin dans ma carte depuis ma base de données: son code est:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
 header('Access-Control-Allow-Origin: *');
 
 $servername = "localhost";
  $username = "root";
  $password = "15957";
  $dbname = "innotec";
 // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
  }
 $return_arr = Array();
 $sql ="SELECT CodeClient,PrecisionGPS,Latitude,Longitude,Route,Secteur,
 Agence,BarCode,PrenomClient,NumAdresse,Tel,Whatsapp,NbrFrigo,OpenAm,
 CloseAm,OpenPm,ClosePm,OpenAmVen,CloseAmVen,OpenPmVen,ClosePmVen,
 OpenAmDim,CloseAmDim,OpenPmDim,ClosePmDim,IMEI,Date_Added FROM records";
 $result = $conn->query($sql);
 
 while ($row = $result->fetch_assoc()) {array_push($return_arr,$row);}
 
 echo json_encode($return_arr);
  ?>

s'il vous plaît laissez-moi savoir si vous avez besoin de plus d'informations

Merci pour votre temps .

**ProgElecT** · 13/03/2018, 13h05

Salut

Je suis étonné de la syntaxe de ta ligne N°9 dans fichier index.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js??key=********************************&sensor=false"></script>

tu peux faire simplement:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://maps.googleapis.com/maps/api/js??key=********************************&sensor=false"></script>

**salamaabdelhakim** · 13/03/2018, 13h58

le script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js??key=********************************&sensor=false"></script>

execute bien , je cache juste ma clé ,, à l'endroit pour l'afficher, je suis mis **** ,........ ce n'est pas quelque chose d'important

merci monsieur pour votre temps

toute aide serait appréciée

Marker Cluster ne fonctionne pas correctement

APIs Google

Discussions similaires

Partager

Partager