Store locator qui modifie les markers au moment du dragend, problème avec la destruction des précédents marker

**seifscalp** · 29/05/2015, 17h15

Bonjour à tous,

je vous remercie d'abord pour le temps que vous allez consacrer à mon soucis qui me prend la tête depuis 2 jours

Projet :

- créer des marqueurs qui se chargent sur la carte et leur description se charge a coté de la carte, seulement je désire que seul ceux qui se trouvent dans les coordonnees de la carte soient visible et chargés, j'appelle donc ma fonction pour recharger les marqueurs à partir du moment ou l'event dragend ( glisser la carte sur un coté ) est appelé et ca marche les première fois mais ça finit par bloquer car le script rame, je pense que mon code à un soucis du coté de la suppression des anciens markers clearlocations()

si quelqu'un plus calé que moi dans le domaine peux m'aider à corriger mes erreurs et m'expliquer, ce serai top !!

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
154
155
156
157
158
159
160
161
162
163
164
165
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + MySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAhBXKSGzBdEmKuktSInMQpxRfuRyNeM7MV12upuhoiMqXvRvmlxTe8Rq7tdFjyXZf2Z1ftuKxU8KdQA" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var geocoder;
 var highlightCircle;
    var currentMarker;
 
 
    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.setCenter(new GLatLng(40, -100), 4);
	map.setUIToDefault();
        GEvent.addListener(map, "zoomend", function() {
	  highlightCurrentMarker();	
        });
 
      }
    }
 
   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }
    function clearLocations() {
 
///// Je sèche un peu pour bien remplir cette fonction qui me bloque :)
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;
     sidebar.innerHTML = "";
   }
   function searchLocationsNear(center) {
	   clearLocations();
   var bds1 = map.getBounds();
   var South_Lat = bds1.getSouthWest().lat();
   var South_Lng = bds1.getSouthWest().lng();
   var North_Lat = bds1.getNorthEast().lat();
   var North_Lng = bds1.getNorthEast().lng();
     var searchUrl = 'markerdata4.php?so_lat=' + South_Lat + '&so_lng=' + South_Lng + '&no_lat=' + North_Lat + '&no_lng=' + North_Lng + '';
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
       map.clearOverlays();
 
       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(center.lat(), center.lng()), 12);
         return;
       }
 
       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
 
         var marker = createMarker(point, name, address);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
      //   map.setCenter(new GLatLng(center.lat(), center.lng()), 12);
     });
   }
 
    function createMarker(point, name, address) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
 
 
   GEvent.addListener(map, "dragend", function() {
   var bds =  map.getCenter();
   searchLocationsNear(bds);
  });   
 
	GEvent.addListener(marker, "click", function() {
	  currentMarker = marker;
	  highlightCurrentMarker();	
          });
 
	  // This line highlights the marker when its moused over
          GEvent.addListener(marker, "mouseover", function() {
	  currentMarker = marker;
	  highlightCurrentMarker();	
          });
 
 
 
      return marker;
    }
 
 
	//// Fonction qui rempli la side bar  
    function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
		//// Fin fonction qui rempli la side bar  
    //]]>
  </script>
  </head>
 
  <body onload="load()" onunload="GUnload()">
    Address: <input type="text" id="addressInput"/>
 
    Radius: <select id="radiusSelect">
      <option value="1" selected>1</option>
      <option value="5">5</option>
    </select>
    <input type="button" onclick="searchLocations()" value="Search Locations"/>
    <br/>    
    <br/>
<div style="width:800px; font-family:Arial, 
sans-serif; font-size:11px; border:1px solid black">
  <table> 
    <tbody> 
      <tr>
        <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>
 
        </td>
        <td> <div id="map" style="overflow: hidden; width:600px; height:400px"></div> </td>
      </tr> 
    </tbody>
  </table>
</div>    
 
 
  </body>
</html>

si quelqu'un connait un bon tutorial qui pourrai m'aider à gérer ce clearlocations, ce serai parfait, merci

**NoSmoking** · 30/05/2015, 14h57

Bonjour,
la première des choses à faire et de migrer ton code sous la version 3.x de l'API.
►Upgrading Your Google Maps JavaScript Application To v3

**seifscalp** · 01/06/2015, 02h46

Bonjour NoSmoking,

tout d'abord merci d'avoir donné une réponse,

ensuite, j'ai finalement adopter un plugin http://www.bjornblog.com/web/jquery-...locator-plugin

que j'ai remodifié à ma sauce après plusieurs heures de travail (jours... ) c'est tout parfaitement fonctionnel

Bonne nuit !

Store locator qui modifie les markers au moment du dragend, problème avec la destruction des précédents marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager