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

Anuncios

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s