Store Locator e MarkerClusterer for Google Maps v3

**xGioweb** · 14-12-2011, 01:00

Ciao, sto facendo un po di esperimenti per creare uno "store locator" efficiente. In questa discussione: Store Locator con PHP, MySQL & Google Maps ho affrontato e risolto grazie all'aiuto di philbert, l'interrogazione al database mysql, la creazione del file .xml con gli indirizzi e la generazione mappa di google. Siccome ho circa 3000 record da mostrare in italia... mi sono subito reso conto dell'ammucchiata di marker che si visualizza su bassi livelli di zoom.

Allora ho cercato e capito che bisogna usare i "MarkerClusterer" for Google Maps v3

Qui ci sono gli esempi:
MarkerClusterer v3 Examples

In particolare mi interessa questo:
A simple example of MarkerClusterer (100 markers)

La domanda è questa, nel codice dell'esempio che è questo:

codice:

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer v3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }

    </style>

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

    <script type="text/javascript" src="../src/data.json"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>

    


      Compiled |
      Standard version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

non trovo da nessuna parte indicazione sulla fonte xml o sulle coordinate dei punti mostrati.

Mi potete spiegare come la mappa interagisce con un file di indirizzi xml tipo questo:

codice:

<?xml version="1.0"?>
<markers><marker name="Round Table Pizza: Mountain View" address="570 N Shoreline Blvd, Mountain View, CA" lat="37.402653" lng="-122.079353" distance="0.38091455044131"/>
<marker name="Kapp's Pizza Bar & Grill" address="191 Castro St, Mountain View, CA" lat="37.393887" lng="-122.078918" distance="0.5596115438175"/>
...
</markers>

Grazie per ora

**Vindav** · 14-12-2011, 13:46

apri il file data.json(fonte json e non xml ovviamente) e trovi tutte le coordinate

**xGioweb** · 14-12-2011, 16:14

json!! In pratica devo creare da php un file json invece del file xml?
Non so proprio niente di questo json... devo mettermi a studiare...

Se non ho capito male json è derivato da js quindi si può discutere in questa sezione giusto?
Grazie Vindav!

**Vindav** · 14-12-2011, 16:35

beh non sei mica costretto ad utilizzare json, è solo un esempio quello postato, se preferisci utilizzare un xml funziona cmq

Se non ho capito male json è derivato da js quindi si può discutere in questa sezione giusto?

si json è un formato per lo scambio di informazioni client/server

**xGioweb** · 14-12-2011, 18:26

grazie Vindav! Prima di decidere come passare i dati, ho provato ad eseguire l'esempio così com'è, ma in locale. Ho scaricato i file collegati:
data.json , markerclusterer.js e ovviamente la pagina Html e il tutto si genera correttamente come nell'esempio.

Ho una domanda sulla base dati json... la prima riga "var data = { "count": 10785236," che conta? Il numero di record del database? non mi sembra...

codice:

var data = { "count": 10785236,
 "photos": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"}
,
{"photo_id": 522084, "photo_title": "In Memoriam Antoine de Saint ExupÃ©ry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa PÃ©ter", "owner_url": "http://www.panoramio.com/user/109117"}
,
{"photo_id": 1578881, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"}
,
.......
.......
{"photo_id": 7593894, "photo_title": "æ¡‚æž—åèƒœç™¾æ™¯â€”â€”é‡é¾™æ²³", "photo_url": "http://www.panoramio.com/photo/7593894", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/7593894.jpg", "longitude": 110.424957, "latitude": 24.781747, "width": 500, "height": 375, "upload_date": "04 February 2008", "owner_id": 161470, "owner_name": "John Su", "owner_url": "http://www.panoramio.com/user/161470"}
]}

ho fatto una prova lasciando solo 7 record ma non funziona, non visualizzo più markers...

codice:

var data = { "count": 7,
 "photos": [{"photo_id": 1, "photo_title": "Title 1", "photo_url": "http://www.sito.it", "photo_file_url": "http://www.sito.it", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"}
,
{"photo_id": 2, "photo_title": "In Memoriam Antoine de Saint ExupÃ©ry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa PÃ©ter", "owner_url": "http://www.panoramio.com/user/109117"}
,
{"photo_id": 3, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"}
,
{"photo_id": 4, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 December 2006", "owner_id": 13058, "owner_name": "Kyryl", "owner_url": "http://www.panoramio.com/user/13058"}
,
{"photo_id": 5, "photo_title": "Arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 June 2006", "owner_id": 4112, "owner_name": "Roberto Garcia", "owner_url": "http://www.panoramio.com/user/4112"}
,
{"photo_id": 6, "photo_title": "two planes", "photo_url": "http://www.panoramio.com/photo/10240311", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/10240311.jpg", "longitude": 20.306683, "latitude": 49.750107, "width": 332, "height": 500, "upload_date": "15 May 2008", "owner_id": 454219, "owner_name": "Rafal Ociepka", "owner_url": "http://www.panoramio.com/user/454219"}
,
{"photo_id": 7, "photo_title": "æ¡‚æž—åèƒœç™¾æ™¯â€”â€”é‡é¾™æ²³", "photo_url": "http://www.panoramio.com/photo/7593894", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/7593894.jpg", "longitude": 110.424957, "latitude": 24.781747, "width": 500, "height": 375, "upload_date": "04 February 2008", "owner_id": 161470, "owner_name": "John Su", "owner_url": "http://www.panoramio.com/user/161470"}
,
]}

mi puoi dare qualche dritta

per capire questa struttura di dati?

Grazie tante!!!!!!

**Vindav** · 14-12-2011, 19:02

count non so cosa sia, nel codice di esempio non lo usa nemmeno... cmq di solito si riferisce al numero di record presenti

Però come ti ho già detto quello è solo un esempio, se il dato "count" non ti serve semplicemente lo levi dal json

codice:

ho fatto una prova lasciando solo 7 record ma non funziona, non visualizzo più markers...

il json è formalmente scorretto, hai lasciato un virgola di troppo alla fine

**xGioweb** · 15-12-2011, 16:32

hai ragione

ho eliminato dal database tutte quelle voci che non c'entrano niente e questo è il risultato.

codice:

var data = {"OPERATORI": [
{"id": 001, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.1227, "longitude": 12.4605},
{"id": 002, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.2227, "longitude": 12.4605},
{"id": 003, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.3227, "longitude": 12.4605},
{"id": 004, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.4227, "longitude": 12.4605},
{"id": 005, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.5227, "longitude": 12.4605},
{"id": 006, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.6227, "longitude": 12.4605},
{"id": 007, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.7227, "longitude": 12.4605},
{"id": 008, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.8227, "longitude": 12.4605},
{"id": 009, "name": "Ragione Sociale", "address": "Via...", "latitude": 41.9227, "longitude": 12.4605},
{"id": 010, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.1227, "longitude": 12.4605},
{"id": 011, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.2227, "longitude": 12.4605},
{"id": 012, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.3227, "longitude": 12.4605},
{"id": 013, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.4227, "longitude": 12.8605},
{"id": 014, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.5227, "longitude": 12.4605},
{"id": 015, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.6227, "longitude": 12.8605},
{"id": 016, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.7227, "longitude": 12.4605},
{"id": 017, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.8227, "longitude": 12.4605},
{"id": 018, "name": "Ragione Sociale", "address": "Via...", "latitude": 42.9227, "longitude": 12.8605},
{"id": 019, "name": "Ragione Sociale", "address": "Via...", "latitude": 43.1227, "longitude": 12.4605},
{"id": 020, "name": "Ragione Sociale", "address": "Via...", "latitude": 43.2227, "longitude": 12.4605},
{"id": 021, "name": "Ragione Sociale", "address": "Via...", "latitude": 43.3227, "longitude": 12.8605},
{"id": 022, "name": "Ragione Sociale", "address": "Via...", "latitude": 43.4227, "longitude": 12.4605},
{"id": 023, "name": "Ragione Sociale", "address": "Via...", "latitude": 43.5227, "longitude": 12.8605},
{"id": 024, "name": "Ragione Sociale", "address": "Via...", "latitude": 45.6227, "longitude": 12.4605},
{"id": 025, "name": "Ragione Sociale", "address": "Via...", "latitude": 45.7227, "longitude": 12.9605}
]}

ovviamente con pochi record bisogna portare il valore delle aggregazioni di markers da 100 a 20

codice:

        for (var i = 0; i < 20; i++) {

Per ora sono molto soddisfatto del risultato!! grazie Vindav!!

**xGioweb** · 16-12-2011, 01:05

Originariamente inviato da Vindav
count non so cosa sia, nel codice di esempio non lo usa nemmeno... cmq di solito si riferisce al numero di record presenti

Però come ti ho già detto quello è solo un esempio, se il dato "count" non ti serve semplicemente lo levi dal json

Hei Vindav

riguardo a quel count... non ho ben capito a che serve...

Adesso ho un altro problema con i conti... se all'interno dello script non metto il numero esatto di record che ha il db, non mi mostra i markers... in pratica se dove c'è 100 scrivo 250

Codice PHP:


var markers = [];

for (var i = 0; i < 100; i++) {

mi mostra markers fino al 250° record e così via fino a 2436 (totale record). Se scrivo 2437 spariscono tutti

riposto lo script intero... tu hai qualche idea?

Codice PHP:


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



    <script type="text/javascript" src="../src/data.json"></script>

    <script type="text/javascript">

      var script = '<script type="text/javascript" src="../src/markerclusterer';

      if (document.location.search.indexOf('compiled') !== -1) {

        script += '_compiled';

      }

      script += '.js"><' + '/script>';

      document.write(script);

    </script>



    <script type="text/javascript">

      function initialize() {

        var center = new google.maps.LatLng(37.4419, -122.1419);



        var map = new google.maps.Map(document.getElementById('map'), {

          zoom: 3,

          center: center,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        });



        var markers = [];

        for (var i = 0; i < 100; i++) {

          var dataPhoto = data.photos[i];

          var latLng = new google.maps.LatLng(dataPhoto.latitude,

              dataPhoto.longitude);

          var marker = new google.maps.Marker({

            position: latLng

          });

          markers.push(marker);

        }

        var markerCluster = new MarkerClusterer(map, markers);

      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

**Vindav** · 16-12-2011, 12:42

Originariamente inviato da xGioweb
Hei Vindav

riguardo a quel count... non ho ben capito a che serve...

Adesso ho un altro problema con i conti... se all'interno dello script non metto il numero esatto di record che ha il db, non mi mostra i markers... in pratica se dove c'è 100 scrivo 250

Codice PHP:


var markers = [];

for (var i = 0; i < [COLOR=red]100[/COLOR] ; i++) {

mi mostra markers fino al 250° record e così via fino a 2436 (totale record). Se scrivo 2437 spariscono tutti

riposto lo script intero... tu hai qualche idea?

Mi sa che non hai capito come funziona, nel ciclo devi inserire il numero esatto di record che hai nel db(e quindi anche nel json) se vuoi che tutti i markers vengano mostrati nella mappa. Il valore su cui viene effettuato il ciclo non è il numero di cluster! ma il numero di marker. Nell'esempio recuperava solo i primi 100 record presenti nel json, ovviamente immagino tu li voglia recuperare tutti. Hai 2 soluzioni:

Valorizzo count nel json con il numero totale di record presenti e imposto il ciclo cosi:

for (var i = 0; i < data.count ; i++) {

oppure recupero dall'array photo il numero di record presenti nel json cosi:

for (var i = 0; i < data.photos.length ; i++) {

La libreria raggrupperà i marcatori in cluster in base alla loro distanza dal centro di un cluster. Se aggiungerai un marcatore successivamente, il clusterMarker cercherà di raggrupparlo in un cluster presente più vicino, e se non riesce a trovarne uno, verrà creato un nuovo cluster con il marcatore appena aggiunto. Il numero di marcatori in un cluster viene visualizzato sulla mappa all'intero del cluster. Se guardi nell'esempio ogni cluster ha un numerino al suo interno, che rappresenta il numero di marker che sono stati raggruppati in quel determinato cluster.
Spero di essermi spiegato decentemente non è semplicissimo da descrivere.

**xGioweb** · 16-12-2011, 14:28

sei stato chiarissimo e desso ho capito!
Ho utilizzato il secondo metodo

Codice PHP:


for (var i = 0; i < data.photos.length ; i++) {

e funziona!!!

Grazie ancora Vindav

Discussione: Store Locator e MarkerClusterer for Google Maps v3

Strumenti discussione

Ricerca discussione

Visualizza

Store Locator e MarkerClusterer for Google Maps v3

Permessi di invio