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

Fuente :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml">


<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=""></script> 

<script type="text/javascript" src=""></script>

<script type="text/javascript" src="scripts/downloadxml.js"></script>

<style type="text/css">

html, body { height: 100%; } 


<script type="text/javascript"> 


      // 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(*-100000)<<5


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

        infowindow.setContent(contentString); ,marker);


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


    // 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"),


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



      // 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



    // from the v2 tutorial page at:





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


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

    <table border="1"> 



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


        <td valign="top" > 

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





    <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>


<script src="" type="text/javascript"> 


<script type="text/javascript"> 

_uacct = "UA-162157-1";



<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 type="text/javascript"



<div id="w3valid">

    <a href="" ><!-- target="validationresults" --><img


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




Y el xml


<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"/>


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

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

Deja una respuesta

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

Logo de

Estás comentando usando tu cuenta de Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s