Problemi con markerclusterer delle API di Google Maps

**Beppe_66** · 11-11-2013, 22:38

Salve a tutti,
ho una pagina che visualizza più marker su una google maps richiamati da un xml generato dinamicamente.
Quando provo a creare un raggruppamento con markerclusterer, sulla mappa si visualizza un solo marker.
Qualcuno può aiutarmi a capire dove sbaglio?
Grazie

allego il codice utilizzato

codice:

<head>
<title>clustering marker</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
    
    //<=!=[=C=D=A=T=A=[

function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(40.9, 16.7),
            zoom: 8,
            mapTypeId: 'roadmap'
             });
          var infoWindow = new google.maps.InfoWindow;

              downloadUrl(xml.asp, function(data) { 
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                       var label = markers[i].getAttribute("label");
                       var lat = markers[i].getAttribute("lat");
                     var lng = markers[i].getAttribute("lng");
                     var data = markers[i].getAttribute("data");
                      var point = new google.maps.LatLng(
                          parseFloat(markers[i].getAttribute("lat")),
                          parseFloat(markers[i].getAttribute("lng")));
                      var html = "<b>" + label + "</b> <br/>" + markers[i].getAttribute("data");
                       var marker = new google.maps.Marker({
                           map: map,
                        position: point,
                          });
                    markers.push(marker); // istruzione non funzionante

               bindInfoWindow(marker, map, infoWindow, html);
            }
                    var mcOptions = {gridSize: 5, maxZoom: 15}; // istruzione non funzionante
                     var markerCluster = new MarkerClusterer(map, markers, mcOptions); // istruzione non funzionante
      });

    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]=]=>

  </script>

  </head>

**m4rko80** · 13-11-2013, 10:22

Ciao, ho usato poco le v3 ma dalla documentazione mi pare che il tuo presunto array markers sia in realta già qualcos'altro, ossia il documento xml che cicli. A questo fai aggiungi un elemento ma non è un array.
Quindi dovresti avere var gMapsMarkers = []; e poi fare il push su di questo e passarlo al makerCluster.
Il problema magari è tutto qui.

**Beppe_66** · 15-11-2013, 21:06

Grazie mille, ci proverò anche se temo che sia complesso per le mie capacità.

Originariamente inviata da m4rko80

Ciao, ho usato poco le v3 ma dalla documentazione mi pare che il tuo presunto array markers sia in realta già qualcos'altro, ossia il documento xml che cicli. A questo fai aggiungi un elemento ma non è un array.
Quindi dovresti avere var gMapsMarkers = []; e poi fare il push su di questo e passarlo al makerCluster.
Il problema magari è tutto qui.

**Al_katraz984** · 16-11-2013, 02:50

prova cosi:

codice:

var markersArr = [];

function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(40.9, 16.7),
            zoom: 8,
            mapTypeId: 'roadmap'
             });
          var infoWindow = new google.maps.InfoWindow;

              downloadUrl(xml.asp, function(data) { 
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                       var label = markers[i].getAttribute("label");
                       var lat = markers[i].getAttribute("lat");
                     var lng = markers[i].getAttribute("lng");
                     var data = markers[i].getAttribute("data");
                      var point = new google.maps.LatLng(
                          parseFloat(markers[i].getAttribute("lat")),
                          parseFloat(markers[i].getAttribute("lng")));
                      var html = "<b>" + label + "</b> <br/>" + markers[i].getAttribute("data");
                       var marker = new google.maps.Marker({
                           map: map,
                        position: point,
                          });
                    markersArr.push(marker); // istruzione non funzionante

               bindInfoWindow(marker, map, infoWindow, html);
            }
                    var mcOptions = {gridSize: 5, maxZoom: 15}; // istruzione non funzionante
                     var markerCluster = new MarkerClusterer(map, markersArr, mcOptions); // istruzione non funzionante
      });

    }

**Beppe_66** · 19-11-2013, 10:50

Grazie, ci ho provato ma il risultato non cambia.
Ho provato ad aggiungere il rigo da te suggerito anche a vari livelli nel codice ma non funziona comunque.
Grazie lo stesso.

Originariamente inviata da Al_katraz984

prova cosi:

codice:

var markersArr = [];

function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(40.9, 16.7),
            zoom: 8,
            mapTypeId: 'roadmap'
             });
          var infoWindow = new google.maps.InfoWindow;

              downloadUrl(xml.asp, function(data) { 
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                       var label = markers[i].getAttribute("label");
                       var lat = markers[i].getAttribute("lat");
                     var lng = markers[i].getAttribute("lng");
                     var data = markers[i].getAttribute("data");
                      var point = new google.maps.LatLng(
                          parseFloat(markers[i].getAttribute("lat")),
                          parseFloat(markers[i].getAttribute("lng")));
                      var html = "<b>" + label + "</b> <br/>" + markers[i].getAttribute("data");
                       var marker = new google.maps.Marker({
                           map: map,
                        position: point,
                          });
                    markersArr.push(marker); // istruzione non funzionante

               bindInfoWindow(marker, map, infoWindow, html);
            }
                    var mcOptions = {gridSize: 5, maxZoom: 15}; // istruzione non funzionante
                     var markerCluster = new MarkerClusterer(map, markersArr, mcOptions); // istruzione non funzionante
      });

    }

Discussione: Problemi con markerclusterer delle API di Google Maps

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Problemi con markerclusterer delle API di Google Maps

Permessi di invio