Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από fafos » 02 Σεπ 2011 00:15

Συνέχεια από εδώ: http://www.freestuff.gr/forums/viewtopic.php?t=57914

Ένα πρόβλημα που μπορεί να αντιμετωπίσετε είναι ο μεγάλος αριθμός markers σε κάποιον χάρτη. Αν τα markers είναι μέχρι 100-200 δεν τρέχει και τίποτα.. αν όμως είναι χιλιάδες το πιθανότερο είναι να "κρασάρετε" τον browser του επισκέπτη σας!

Μία καλή λύση είναι να χωρίσετε τον χάρτη σας σε περισσότερους χάρτες ανά περιοχή. Και πάλι όμως μπορεί μία περιοχή να έχει μεγάλο όγκο markers ή να μην σας κάνει αυτή η λύση.

Υπάρχουν κάποιες τεχνικές όπου μπορούμε να περιορίσουμε το loading και να εμφανίζουμε πιο γρήγορα τον χάρτη. Εδώ θα εξετάσουμε τον έναν τρόπο τον οποίο θεωρώ και πιο γρήγορο.. το Markers Cluster... ας δούμε κάποιους τρόπους που υπάρχουν:

Markers Cluster: Με αυτόν τον τρόπο ομαδοποιούμε τους markers ανάλογα με τον αριθμό τους και το ζουμ του χάρτη. θεωρείται ο πιο γρήγορος τρόπος

Markers Manager: Αρκετά δημοφιλής τρόπος ο οποίος μας δείχνει κάποια markers στον χάρτη και όσο τον "ζουμάρουμε" αρχίζει να μας εμφανίζει περισσότερους. Πιο αργός από τον Markers Cluster αλλά καλή λύση. Δείτε ένα demo εδώ: http://google-maps-utility-library-v3.g ... r_map.html
Δεν θα τον αναπτύξω αυτόν τον τρόπο αλλά μπορείτε να δείτε οδηγίες εδώ: http://google-maps-utility-library-v3.g ... mples.html

Αυτοί οι 2 τρόποι είναι οι πιο γνωστοί αλλά υπάρχει και τα fusion tables (κλικ στον τίτλο για περισσότερα)


Markers Cluster:

Για αρχή δείτε το παράδειγμα για να καταλάβετε πως δουλεύει: http://istopoli.com/tuts/gmv3/markerscluster.html

εδώ δείχνω τα δεδομένα από ένα xml αρχείο με 70+ markers.. ο αριθμός είναι μικρός αλλά μπορείτε να δείτε την διαφορά εδώ: http://google-maps-utility-library-v3.g ... ample.html
με 1000 markers και cluster χρειάζεται 2-3 ms και ο απλός χάρτης χρειάζεται 12-13 ms!

Ας φτιάξουμε έναν χάρτη με marker cluster

Χρειαζόμαστε την βοήθεια μίας javascript βιβλιοθήκης την οποία μπορείτε να κατεβάσετε εδώ: http://istopoli.com/tuts/gmv3/js/markerclusterer.js

Καλούμε αυτό το js αρχείο κάτω από τις βιβλιοθήκες της google:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
(το util.js το καλούμε όταν δουλεύουμε με xml)

Δημιουργούμε ένα var για να δηλώσουμε μία array:

Κώδικας: Επιλογή όλων

var markersArray = &#91;&#93;;
μέσα στην for δημιουργούμε την array:

Κώδικας: Επιλογή όλων

markersArray.push&#40;marker&#41;;
αμέσως έξω από την for δημιουργούμε το cluster:

Κώδικας: Επιλογή όλων

var markerCluster = new MarkerClusterer&#40;map, markersArray&#41;;
Ο χάρτης είναι έτοιμος και τα δείχνει "αλά cluster"! Ολοκληρωμένος ο κώδικας:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;

  function initialize&#40;&#41; &#123;
    var myLatlng = new google.maps.LatLng&#40;37.97219071239462, 23.72617360000004&#41;;
    var myOptions = &#123;
      zoom&#58;5,
      center&#58; myLatlng,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;
    map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#41;;
	var bounds = new google.maps.LatLngBounds&#40;&#41;;
	
		var markersArray = &#91;&#93;;
    downloadUrl&#40;"markersBig.xml", function&#40;data&#41; &#123;

      var markers = data.documentElement.getElementsByTagName&#40;"marker"&#41;;	  
      for &#40;var i = 0; i < markers.length; i++&#41; &#123;
        var latlng = new google.maps.LatLng&#40;parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lat"&#41;&#41;,
                                    parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lng"&#41;&#41;&#41;;
        var marker = createMarker&#40;markers&#91;i&#93;.getAttribute&#40;"name"&#41;, latlng&#41;;
		markersArray.push&#40;marker&#41;;
		bounds.extend&#40;latlng&#41;;
       &#125;

var markerCluster = new MarkerClusterer&#40;map, markersArray&#41;;
map.fitBounds&#40;bounds&#41;;
     &#125;&#41;;




&#125;
  function createMarker&#40;name, latlng&#41; &#123;
    var marker = new google.maps.Marker&#40;&#123;position&#58; latlng, map&#58; map&#125;&#41;;
    google.maps.event.addListener&#40;marker, "click", function&#40;&#41; &#123;
      if &#40;infowindow&#41; infowindow.close&#40;&#41;;
      infowindow = new google.maps.InfoWindow&#40;&#123;content&#58; name&#125;&#41;;
      infowindow.open&#40;map, marker&#41;;
    &#125;&#41;;
	
    return marker;
	
  &#125;

</script>
Δείτε τον χάρτη με διαφορετικούς markers: http://istopoli.com/tuts/gmv3/markersclustericons.html

Δείτε τον χάρτη με array: http://istopoli.com/tuts/gmv3/markersclusterarray.html

Δείτε τον χάρτη με array και διαφορετικούς markers: http://istopoli.com/tuts/gmv3/markerscl ... icons.html

ένα πολύ καλό παράδειγμα με καιρό live μπορείτε να δείτε εδώ: http://www.ellinikosfm.com/new/weather/ ... emap/?l=gr

(Αν μπορέσω θα δώσω ένα βοήθημα για παρόμοιο χάρτη)


Τα εικονίδια που δείχνει ο cluster είναι τα default της google.. μπορούμε όμως να βάλουμε τα δικά styles όπως εδώ: http://istopoli.com/tuts/gmv3/markersclusterdif.html

δημιουργούμε μία array με τα δικά μας styles:

Κώδικας: Επιλογή όλων

      var mcStyles = &#123;styles&#58;&#91;&#123;
        url&#58; 'images/conv30.png',
        height&#58; 27,
        width&#58; 30,
        anchor&#58; &#91;3, 0&#93;,
        textColor&#58; '#ff00ff',
        textSize&#58; 10
      &#125;, &#123;
        url&#58; 'images/conv40.png',
        height&#58; 36,
        width&#58; 40,
        anchor&#58; &#91;6, 0&#93;,
        textColor&#58; '#ff0000',
        textSize&#58; 11
      &#125;, &#123;
        url&#58; 'images/conv50.png',
        width&#58; 50,
        height&#58; 45,
        anchor&#58; &#91;8, 0&#93;,
        textSize&#58; 12
      &#125;&#93;&#125;;
εκεί που καλούμε τον cluster δίνουμε τον τίτλο της array:

Κώδικας: Επιλογή όλων

var markerCluster = new MarkerClusterer&#40;map, markersArray, mcStyles&#41;;
αυτό ήταν!!

Επεξήγηση styles options:

url: 'images/conv50.png' = η διαδρομή του εικονίδιου
width: 50 = το μήκος του εικονίδιου
height: 45 = το ύψος του εικονίδιου
anchor: [8, 0] = το κεντράρισμα του κειμένου μέσα στο εικονίδιο
textSize: 12 = το μέγεθος του κειμένου μέσα στο εικονίδιο

Υπάρχουν και άλλα options τα οποία μπορείτε να δείτε εδώ: http://google-maps-utility-library-v3.g ... rence.html (τα Properties)

Μπορείτε να δώσετε όσα styles θέλετε...

Στο επόμενο βοήθημα θα δούμε πως μπορούμε να εμφανίζουμε infowindows με το δικό μας style
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από fafos » 20 Σεπ 2011 17:34

Όσοι χρησιμοποιούν το Markers Cluster θα διαπίστωσαν ένα πρόβλημα σήμερα το οποίο οφείλεται στην Google.. μέχρι να το διορθώσουν αλλάξτε το link προς τις βιβλιοθήκες του χάρτη σε

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από tattooiv » 08 Φεβ 2012 21:03

exw ena paradeigma sto opoio exw 700 markers apo ena xml arxeio, xrisimopoiw kai Markers Cluster alla o epeksergastis moy xtypaei 100% kai o firefox kai o chrome argei na anoiksei tin selida kai kollaei, gnwrizei kaneis ti ftaiei??

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από fafos » 08 Φεβ 2012 21:10

tattooiv έγραψε:exw ena paradeigma sto opoio exw 700 markers apo ena xml arxeio, xrisimopoiw kai Markers Cluster alla o epeksergastis moy xtypaei 100% kai o firefox kai o chrome argei na anoiksei tin selida kai kollaei, gnwrizei kaneis ti ftaiei??
exeis kai infowindow gia kathe marker?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από tattooiv » 08 Φεβ 2012 21:24

kai infowindow alla kai diaforetiko icon gia to marker pou to pernei mesa apo to xml arxeio

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από fafos » 08 Φεβ 2012 21:32

an einai polles oi plhrofories tou infowindow doulepse me markermanager: http://google-maps-utility-library-v3.g ... r_map.html

yparxoun kai tropoi na kaleis ta infowindow mono otan kaneis click sto marker (me ajax).. etsi sto xml exeis mono thn eikona kai tis syntetagmenes tou marker..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Coddy
Δημοσιεύσεις: 7
Εγγραφή: 06 Μάιος 2005 23:09

Google Maps V3 | 4ο, Μεγάλος αριθμός Markers

Δημοσίευση από Coddy » 26 Απρ 2012 13:01

Για όποιον δουλεύει με χιλιάδες markers, η χρήση json είναι μονόδρομος! Ο χρόνος εμφάνισης των clusters είναι υποπολλαπλάσιος!

Προτείνω δε Marker Clusterer Plus.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες