Carte ne s'affiche plus si on a trop de points

**micker** · 06/03/2016, 14h36

hello a tous je suis en train de me coder un module joomla qui affiche une carte googlemap
tout ce passe pas mal sauf que j'ai un soucis un peu aléatoire ... a partir d'un certain nombre de point je n'ai plus de carte et pas d'erreur ..

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
 
<div id="mod_fleximap_default<?php echo $module->id;?>" class="mod_fleximap<?php echo $moduleclass_sfx ?>" style="width:<?php echo $width; ?>;height:<?php echo $height; ?>;">
    <div id="map" style="position: absolute;width:<?php echo $width; ?>;height:<?php echo $height; ?>;"></div>
 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false<?php if ($apikey) echo '?key='.$apikey; ?>"></script>
<script type="text/javascript" src="modules/mod_flexigooglemap/assets/js/markerclusterer_compiled.js"></script>
<script type="text/javascript">
 
<?php
    $tMapTips = array();
    //Recuperation de point de ma bdd
    foreach ($itemsLoc as $itemLoc ){
        $coord = unserialize ($itemLoc->value);
        $lat = $coord['lat'];
        $lon = $coord['lon'];
        if (!empty($lat) || !empty($lon) ) {
            if ($useadress){
               $addre = '<p>'.$coord['addr_display'].'</p>'; 
               $addre = '<p>'.$coord['addr_display'].'</p>'; 
               $addre = addslashes($addre);
            }
            $coordo = $lat.",".$lon;
            //$title = json_encode($itemLoc->title);
            $title = addslashes($itemLoc->title);
            if ($uselink){
                    $link = $itemLoc->link;
                    $link = '<p class="link"><a href="'.$link.'" target="'.$linkmode.'">'.$title.'</a></p>';
            }
            // echo "myPoints.push( new google.maps.LatLng(". $coord ."),contentString('toto')); \r\n";
            //echo "['<h4>$title</h4><p>$addre</p>',". $coordo ."],\r\n";
            $tMapTips[] = "['<h4 class=\"fleximaptitle\">$title</h4>$addre $link',". $coordo ."]\r\n";
        }
    }
    $tabMapTipsJS = implode(",",  $tMapTips);
?>
 
    // nouveau script
    // Define your locations: HTML content for the info window, latitude, longitude
    var locations = [ <?php echo $tabMapTipsJS; ?>  ];
 
    var icons = [<?php echo $markerdisplay; ?>]
    var iconsLength = icons.length;
 
 
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-37.92, 151.25),
      mapTypeId: google.maps.MapTypeId.<?php echo $maptype;?>,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 160
    });
 
    var markers = new Array();
 
    var iconCounter = 0;
 
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
          <?php if($animationmarker){
          //animation option
          echo 'animation: google.maps.Animation.DROP,';
}
          ?>
        icon: icons[iconCounter]
      });
 
      markers.push(marker);
 
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
 
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
      	iconCounter = 0;
      }
 
    }
    function autoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      for (var i = 0; i < markers.length; i++) {  
				bounds.extend(markers[i].position);
      }
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    <?php if ($clustermode) {
    
    echo "var mcOptions = {gridSize:$gridsize, maxZoom:$maxzoom};\r\n";
    echo "var marker = new MarkerClusterer(map, markers, mcOptions);\r\n";
}
    ?>
    autoCenter();
 
  </script> 
 
</script>
</div>

cela commence à planté à partir d'une centaine de point même avec le clustering ....
je comprend pas pourquoi
des idées ?

**NoSmoking** · 06/03/2016, 19h06

Bonjour,
ton code PHP ne nous est d'aucune utilité, nous sommes sur un Forum javascript !

Regarde donc le code HTML généré !

Je peux simplement tassurer que l'affichage d'une centaine de markers ne représente pas de motif de plantage.

carte des membres de Developpez

**micker** · 07/03/2016, 10h43

hello voici un extrait

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
<script type="text/javascript">
 
 
    // nouveau script
    // Define your locations: HTML content for the info window, latitude, longitude
    var locations = [ ['<h4 class="fleximaptitle">Zeppelin Museum Friedrichshafen</h4><p>Seestraße 22, 88045 Friedrichshafen, Deutschland</p> <p class="link"><a href="/freizeit-tipps/250" target="">Zeppelin Museum Friedrichshafen</a></p>',47.65051,9.4828]
,['<h4 class="fleximaptitle">Zentrum für Traditionelles Bogenschießen in Kinsau</h4><p>Bahnhofstraße 9, 86981 Kinsau, Deutschland</p> <p class="link"><a href="/freizeit-tipps/77" target="">Zentrum für Traditionelles Bogenschießen in Kinsau</a></p>',47.88052,10.88928]
,['<h4 class="fleximaptitle">Wurzacher Ried mit Erlebnisausstellung MOOR EXTREM</h4><p>Rosengarten 1, 88410 Bad Wurzach, Deutschland</p> <p class="link"><a href="/freizeit-tipps/70" target="">Wurzacher Ried mit Erlebnisausstellung MOOR EXTREM</a></p>',47.90951,9.89909]
,['<h4 class="fleximaptitle">Wildnisschule Allgäu in Rettenberg - Kranzegg</h4><p>Kranzegger Str. 11, 87549 Rettenberg, Deutschland</p> <p class="link"><a href="/freizeit-tipps/75" target="">Wildnisschule Allgäu in Rettenberg - Kranzegg</a></p>',47.5769213,10.3007459]
,['<h4 class="fleximaptitle">Wassertor Museum in Isny</h4><p>Wassertorstraße 52, 88316 Isny im Allgäu, Deutschland</p> <p class="link"><a href="/freizeit-tipps/167" target="">Wassertor Museum in Isny</a></p>',47.6942894,10.041416]
,['<h4 class="fleximaptitle">Wangener Puppentheater</h4><p>Lange G. 43, 88239 Wangen im Allgäu, Deutschland</p> <p class="link"><a href="/freizeit-tipps/90" target="">Wangener Puppentheater</a></p>',47.6858352,9.8358667]
,['<h4 class="fleximaptitle">Walsermuseum in Triesenberg</h4><p>Schlossstrasse 5, 9497 Triesenberg, Liechtenstein</p> <p class="link"><a href="/freizeit-tipps/330" target="">Walsermuseum in Triesenberg</a></p>',47.1184808,9.5429650999999]
,['<h4 class="fleximaptitle">Waldsee Therme</h4><p>Badstraße 16, 88339 Bad Waldsee, Deutschland</p> <p class="link"><a href="/freizeit-tipps/278" target="">Waldsee Therme</a></p>',47.9155778,9.7627785]
,['<h4 class="fleximaptitle">Waldschule Bodensee</h4><p>Fluh 49, 6900 Fluh, Österreich</p> <p class="link"><a href="/freizeit-tipps/162" target="">Waldschule Bodensee</a></p>',47.4924229,9.7910082]
,['<h4 class="fleximaptitle">Walderlebnis-Zentrum Ziegelwies bei Füssen</h4><p>Tiroler Str. 10, 87629 Füssen, Deutschland</p> <p class="link"><a href="/freizeit-tipps/161" target="">Walderlebnis-Zentrum Ziegelwies bei Füssen</a></p>',47.55769,10.69265]
  ];
 
    var icons = ['images/mod_flexigooglemap/marker/ancient_relic_search_L_8x.png']
    var iconsLength = icons.length;
 
 
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-37.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 160
    });
 
    var markers = new Array();
 
    var iconCounter = 0;
 
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
                  icon: icons[iconCounter]
      });
 
      markers.push(marker);
 
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
 
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
      	iconCounter = 0;
      }
 
    }
    function autoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      for (var i = 0; i < markers.length; i++) {  
				bounds.extend(markers[i].position);
      }
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    var mcOptions = {gridSize:50, maxZoom:15};
var marker = new MarkerClusterer(map, markers, mcOptions);
    autoCenter();
 
  </script>

Là la carte marche mais si on met trop de point alors plus de carte mais pas d'erreur

**NoSmoking** · 07/03/2016, 18h47

Rien vu dans ton code qui devrait empêcher le bon déroulement de cellui-ci.

A vérifier quand même que dans tes déclarations de locations il ne traine pas une apostrophe qui fermerait la chaine.

Code :

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

var chaine = 'une chaine qui contient l'apostrophe de la mort !';

la même en mieux

Code :

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

var chaine = 'une chaine qui contient l\'apostrophe de la mort !';

**micker** · 07/03/2016, 20h50

ok ...
petit question (je suis newbie en js ..)
je voudrais rajouté les itinéraires
que l'on puisse cliquer sur un point et que l'on puisse mettre son adresse pour avoir un itinéraire ...
vous auriez des tutos ou des ressources ?
Merci