Google Maps - MakerCluster e infowindow

[stiffa]

Ciao a tutti.

Vorrei intergrare markerCluster e infowindow.

Qualcuno sa come unire le due cose?

Il risultato, avere sulla mappa gruppi di marker con le indicazioni (finestrella di testo e immagini ...infowindow) per ogni segnalino che componeva l'arrei di marker.

Magari sarebbe bello avere una infowindow anche per l'array di marker

[stiffa]

Qualcuno ha mai guardato le librerie google-maps-utility-library-v3

Sto provando di personalizzare quello che ho trovato in rete all'indizzo :

http://google-maps-utility-library-v...t_example.html

Lo speed_test del link e' necessita di 3 file

E' un po lunghetto da postare il codice... ma se magari qualche appassionato vuol svelare l'arcano...

a questa pagina troverete tutti i file
http://google-maps-utility-library-v...rkerclusterer/


In mozilla funziona ma le citta vengono segnate dal segnalino a goccia...il file
http://chart.apis.google.com/chart?c...00000&ext=.png
In questo browser non riesco a capire come raggruppare le città segnate sul file data.json
e farle vedere con il simbolo con al centro il numero delle citta (figlie),

Mentre in explorer la situazione e' ancora piu drastica...
Non visualizzo correttamente e l'errore e'
"prototype e' nullo o non e' un oggetto " nel file makercluster.js

In mozilla la console degli errori non dice nulla....


Help....

[Vindav]

http://forum.html.it/forum/showthrea...hlight=cluster

vedi se ti può aiutare...

[stiffa]

cerchero' di fare domande piu specifiche...il codice e' un po lungo da postare....

se metto

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAKvDbLk2Nz0L4Vp2fAE0HuNgX9vpBIUtQ&sensor=false" type="text/javascript"></script> 

non posso usare markercluster?

se la risp e' "non puoi" ...chi mi aiuta a migrare? da questa

nell'init viene chiamata questa funzione

(function() {
   var map = null;
   var pics = null;
   var markerClusterer = null;
   var markers = [];

   function $(element) {
     return document.getElementById(element);
   }

   var AMC = {
     init: function() {
       if(GBrowserIsCompatible()) {
         map = new GMap2($('map'));
         map.setCenter(new GLatLng(42.1409590, 12.8558641), 5);1325-1163-1110-9575-9708-5069
         map.addControl(new GLargeMapControl());
         pics = data.photos;
        showMarkers(true);
       }
     },
     showMarkers: function(isInit) {
       showMarkers(isInit);
     },
     changeType: function() {
       $("tcounts").innerHTML = "cleaning...";
       setTimeout("AMC.showMarkers()", 0);
     },
     changeNums: function() {
       $("tcounts").innerHTML = "cleaning...";
       $('markerlist').innerHTML = "";
       setTimeout("AMC.showMarkers(true)", 0);
     },
     timing: function() {
       var start = new Date();
     
       if ($("usegmm").checked) 
       {
                       
         markerClusterer = new MarkerClusterer(map, markers);
             
       } else {
         for (var i = 0; i < markers.length; i++) {
           map.addOverlay(markers[i]);
         }
       }
       var end = new Date();
       $("tcounts").innerHTML = end - start;
     }
   }; 

[Vindav]

se metto

codice PHP:

<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAKvDbLk2Nz0L4Vp2fAE0HuNgX9vpBIUtQ&sensor=false" type="text/javascript"></script>


non posso usare markercluster?

no, devi usare la terza versione della libreria, anche perche la 2 è deprecata.

[stiffa]

la sto usando ma ho difficolta a far andare il mio codice.

ora ho messo queste api :

 <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

avanzo a piccoli passi ma ho sempre errori ....

file speed_test.js

/**
 * @fileoverview This demo is used for MarkerClusterer. It will show 100 markers
 * using MarkerClusterer and count the time to show the difference between using
 * MarkerClusterer and without MarkerClusterer.
 * @author Luke Mahe (v2 author: Xiaoxi Wu)
 */

function $(element) {
  return document.getElementById(element);
}

var speedTest = {};

speedTest.pics = null;
speedTest.map = null;
speedTest.markerClusterer = null;
speedTest.markers = [];
speedTest.infoWindow = null;

speedTest.init = function() {
  var latlng = new google.maps.LatLng(39.91, 116.38);
  var options = {
    'zoom': 2,
    'center': latlng,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  };

  speedTest.map = new google.maps.Map($('map'), options);
  speedTest.pics = data.photos;
  
  var useGmm = document.getElementById('usegmm');
  google.maps.event.addDomListener(useGmm, 'click', speedTest.change);
  
  var numMarkers = document.getElementById('nummarkers');
  google.maps.event.addDomListener(numMarkers, 'change', speedTest.change);

  speedTest.infoWindow = new google.maps.InfoWindow();

  speedTest.showMarkers();
};

speedTest.showMarkers = function() {
  speedTest.markers = [];

  var type = 1;
  if ($('usegmm').checked) {
    type = 0;
  }

  if (speedTest.markerClusterer) {
    speedTest.markerClusterer.clearMarkers();
  }

  var panel = $('markerlist');
  panel.innerHTML = '';
  var numMarkers = $('nummarkers').value;

  for (var i = 0; i < numMarkers; i++) {
    var titleText = speedTest.pics[i].photo_title;
    if (titleText == '') {
      titleText = 'No title';
    }

    var item = document.createElement('DIV');
    var title = document.createElement('A');
    title.href = '#';
    title.className = 'title';
    title.innerHTML = titleText;

    item.appendChild(title);
    panel.appendChild(item);


    var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
        speedTest.pics[i].longitude);

    var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=' +
        'FFFFFF,008CFF,000000&ext=.png';
    var markerImage = new google.maps.MarkerImage(imageUrl,
        new google.maps.Size(24, 32));

    var marker = new google.maps.Marker({
      'position': latLng,
      'icon': markerImage
    });

    var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
    google.maps.event.addListener(marker, 'click', fn);
    google.maps.event.addDomListener(title, 'click', fn);
    speedTest.markers.push(marker);
  }

  window.setTimeout(speedTest.time, 0);
};

speedTest.markerClickFunction = function(pic, latlng) {
  return function(e) {
    e.cancelBubble = true;
    e.returnValue = false;
    if (e.stopPropagation) {
      e.stopPropagation();
      e.preventDefault();
    }
    var title = pic.photo_title;
    var url = pic.photo_url;
    var fileurl = pic.photo_file_url;

    var infoHtml = '<div class="info"><h3>' + title +
      '</h3><div class="info-body">' +
      '[url="' + url + '" target="_blank"><img src="][/url]</div>' +
      '<a href="http://www.panoramio.com/" target="_blank">' +
      '<img src="http://maps.google.com/intl/en_ALL/mapfiles/' +
      'iw_panoramio.png"/></a>
' +
      '<a href="' + pic.owner_url + '" target="_blank">' + pic.owner_name +
      '</a></div></div>';

    speedTest.infoWindow.setContent(infoHtml);
    speedTest.infoWindow.setPosition(latlng);
    speedTest.infoWindow.open(speedTest.map);
  };
};

speedTest.clear = function() {
  $('timetaken').innerHTML = 'cleaning...';
  for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
    marker.setMap(null);
  }
};

speedTest.change = function() {
  speedTest.clear();
  speedTest.showMarkers();
};

speedTest.time = function() {
  $('timetaken').innerHTML = 'timing...';
  var start = new Date();
  if ($('usegmm').checked) {
    speedTest.markerClusterer = new MarkerClusterer(speedTest.map, speedTest.markers);
  } else {
    for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
      marker.setMap(speedTest.map);
    }
  }

  var end = new Date();
  $('timetaken').innerHTML = end - start;
}; 

e nel file mappa

   <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="jquery-map/data.json"></script>
    <script type="text/javascript" src="jquery-map/markerclusterer.js"></script>
    <script type="text/javascript" src="jquery-map/speed_test.js"></script>    
    <script language="javascript" type="text/javascript">  
    
    
    window.onload=function(){speedTest.init()};
    </script> 

mi da errore ...."a is null" dove sbaglio? le sto provando tutte...

[stiffa]

risolto...

      <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="jquery-map/data.json"></script>
    <script type="text/javascript" src="jquery-map/markerclusterer.js"></script>
    <script type="text/javascript" src="jquery-map/speed_test.js"></script>    
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
    <script language="javascript" type="text/javascript">  
    
google.load('maps', '3', {
          other_params: 'sensor=false'
      });
      
      google.setOnLoadCallback(speedTest.init);

    </script>