google maps cluster xml – agrupar iconos marcas chinchetas para que no se superpongan con javascript by geocodezip.com

Fuente : geocodezip.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

    <title>Google Maps Javascript API v3 Example: Loading clustered data from an XML</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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" src="scripts/downloadxml.js"></script>

<style type="text/css">

html, body { height: 100%; } 

</style>

<script type="text/javascript"> 

//<![CDATA[

      // this variable will collect the html which will eventually be placed in the side_bar 

      var side_bar_html = ""; 

    

      // arrays to hold copies of the markers and html used by the side_bar 

      // because the function closure trick doesnt work there 

      var gmarkers = []; 



     // global "map" variable

      var map = null;

      var markerclusterer = null;



// A function to create the marker and set up the event window function 

function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({

        position: latlng,

        // map: map,

        zIndex: Math.round(latlng.lat()*-100000)<<5

        });



    google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent(contentString); 

        infowindow.open(map,marker);

        });

    // save the info we need to use later for the side_bar

    gmarkers.push(marker);

    // add a line to the side_bar html

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

}

 

// This function picks up the click and opens the corresponding info window

function myclick(i) {

  google.maps.event.trigger(gmarkers[i], "click");

}



function initialize() {

  // create the map

  var myOptions = {

    zoom: 8,

    center: new google.maps.LatLng(43.907787,-79.359741),

    mapTypeControl: true,

    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},

    navigationControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  google.maps.event.addListener(map, 'click', function() {

        infowindow.close();

        });

      // Read the data from example.xml

      downloadUrl("cga-3_gndc_harvard_edu_cluster.xml", function(doc) {

        var xmlDoc = xmlParse(doc);

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

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

          // obtain the attribues of each marker

          var lat = parseFloat(markers[i].getAttribute("lat"));

          var lng = parseFloat(markers[i].getAttribute("lng"));

          var point = new google.maps.LatLng(lat,lng);

          var id = markers[i].getAttribute("id");

          var country = markers[i].getAttribute("country");

          var html="<b>"+country+"</b><br>"+id;

          // create the marker

          var marker = createMarker(point,country+" "+id,html);

        }

        markerCluster = new MarkerClusterer(map, gmarkers);

        // put the assembled side_bar_html contents into the side_bar div

        document.getElementById("side_bar").innerHTML = side_bar_html;

      });

    }

 

var infowindow = new google.maps.InfoWindow(

  { 

    size: new google.maps.Size(150,50)

  });

    



    // This Javascript is based on code provided by the

    // Community Church Javascript Team

    // http://www.bisphamchurch.org.uk/   

    // http://econym.org.uk/gmap/

    // from the v2 tutorial page at:

    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 



  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

 

    <!-- you can use tables or divs for the overall layout --> 

    <table border="1"> 

      <tr> 

        <td> 

           <div id="map_canvas" style="width: 550px; height: 450px"></div> 

        </td> 

        <td valign="top" > 

           <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> 

        </td> 

      </tr> 

    </table> 

 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 

      However, it seems JavaScript is either disabled or not supported by your browser. 

      To view Google Maps, enable JavaScript by changing your browser options, and then 

      try again.</p>

    </noscript> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 

</script> 

<script type="text/javascript"> 

_uacct = "UA-162157-1";

urchinTracker();

</script> 

<script type="text/javascript"><!--

google_ad_client = "pub-8586773609818529";

google_ad_width = 728;

google_ad_height = 90;

google_ad_format = "728x90_as";

google_ad_type = "text";

google_ad_channel ="";

google_color_border = "CCCCCC";

google_color_bg = "FFFFFF";

google_color_link = "000000";

google_color_url = "666666";

google_color_text = "333333";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 

<div id="w3valid">

    <a href="http://validator.w3.org/check?uri=referer" ><!-- target="validationresults" --><img

        src="http://www.w3.org/Icons/valid-xhtml10"

        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

</div>   

  </body> 

</html> 

Y el xml

<markers>

<marker id="12253" lat="43.369810" lng="-8.395300" country="Spain"/>

<marker id="12256" lat="43.316570" lng="-5.711210" country="Spain"/>

<marker id="12258" lat="43.252700" lng="-2.386930" country="Spain"/>

</markers>

Solo añado tres marcas para ver el ejemplo del codigo, para ver el xml completo pincha aqui

google maps – agrupar marcas (cluster) para mejorar el rendimiento con marcadores masivos – libreria MarkerClusterer by maestrosdelweb.com

Fuente: maestrosdelweb.com

MarkerCulterer agrupa los marcadores y muestra la cantidad de marcadores que hay en cierto segmento. En la documentación en el directorio llamado examples, muestra varios ejemplos de como utilizar esta librería.

Estos son los posibles colores que se pueden mostrar en el mapa que viene por defecto:

  • Azul 2-9
  • Amarillo 10-99
  • Rojo 100-999
  • Violeta 1,000-9,999
  • Violeta oscuro 10,000+

El comportamiento que trae por defecto la clase MarkerClusterer se puede modificar en el tercer parametro. Las posibles opciones son:

  • gridSize: Número entero. Valor por defecto 60
  • maxZoom: Número entero entre el 1 al 23. Indica hasta donde debe hacer el agrupamiento
  • zoomOnClick: Valor booleano para hacer “zoom” al pulsar en el marcador. true ofalse. Valor por defecto true
  • averageCenter: Centrar aproximádamente el marcador. true o false. Valor por defecto true
  • minimumClusterSize: Número mínimo para agrupar los marcadores. Por defecto 2

styles: Es un array que contiene uno o varios objetos de MarkerStyleOptions.
Posibles valores son:

  • url: La dirección de la imagen a mostrar
  • height: El alto de la imagen
  • width: El ancho de la imagen
  • anchor: Array con la posición x y y de los números en la imagen. Por defecto centrado
  • textColor: Color de los números. Por defecto black
  • textSize: Tamaño de los números. Por defecto 11
  • backgroundPosition: Posición del fondo

Es importante el orden en que se indican los objetos en el tercer parametro de la clase MarkerClusterer, las imágenes se van a mostrar conforme al orden de los valores numéricos indicados en los colores por defecto.

También los números de imágenes a colocar son importante, ya que si se coloca uno, esa es la imagen a mostrar en cada uno de los niveles indicados en los colores, si son dos la primera representa el primer valor numérico y la segunda del segundo al quinto, si se colocan tres, la primera representa el primer valor numérico, la segunda el segundo y la tercera del tercero al quinto y así sucesivamente.