Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 29th, 2012  |  syntax: None  |  size: 4.00 KB  |  hits: 19  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Changing Google Maps v3 MarkerClustererPlus Title
  2. var latlng = new google.maps.LatLng( lat, lng );
  3.  
  4.         var qs      = location.search;          
  5.         var options = {
  6.             zoom: 17,
  7.             center: latlng,
  8.             mapTypeId: google.maps.MapTypeId.ROADMAP,
  9.             mapTypeControlOptions: {
  10.                 style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  11.             }
  12.         };
  13.  
  14.         map = new google.maps.Map( mapId[0], options );
  15.  
  16.         google.maps.event.addListener( map, 'idle', function() {
  17.  
  18.             var bounds = map.getBounds();
  19.  
  20.             downloadXML( ABSPATH + 'xml/maps/markers.php' + qs + '&bounds=' + bounds, function( data ) {
  21.  
  22.                 var xml     = parseXml( data );
  23.                 var markers = xml.documentElement.getElementsByTagName( "marker" );
  24.                 var markerArray = [];
  25.  
  26.                 for ( var i = 0; i < markers.length; i++ ) {
  27.  
  28.                     var attributes = getMarkerAttributes( markers[i] );
  29.                     var marker     = createMarker( attributes );
  30.  
  31.                     // Add marker to marker array
  32.                     markerArray.push(marker);
  33.  
  34.                 }
  35.  
  36.                 // Define the marker clusterer
  37.                 var clusterOptions = {
  38.                     zoomOnClick: false,
  39.                     gridSize: 1
  40.                 }
  41.  
  42.                 var markerClusterer = new MarkerClusterer( map, markerArray, clusterOptions );
  43.  
  44.                 // Listen for a cluster to be clicked
  45.                 google.maps.event.addListener( markerClusterer, 'clusterclick', function( cluster ) {
  46.                     combineInfoWindows( cluster );              
  47.                 });
  48.  
  49.                 // Listen for a cluster to be hovered and set title
  50.                 google.maps.event.addListener( markerClusterer, 'mouseover', function( cluster ) {
  51.                     var txt = 'There are ' + cluster.getSize() + ' properties at this location.';
  52.                     //alert( txt );
  53.                     console.log( cluster );
  54.                     markerClusterer.setTitle( txt );
  55.                 });
  56.  
  57.             }); // downloadXML
  58.  
  59.         }); // google.maps.event.addListener( map, 'idle', ... )
  60.        
  61. /**
  62.  * Adds the icon to the DOM.
  63.  */
  64. ClusterIcon.prototype.onAdd = function () {
  65.   var cClusterIcon = this;
  66.  
  67. // MY CHANGES - START
  68. this.cluster_.markerClusterer_.title_ = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
  69. // MY CHANGES - END
  70.  
  71.   this.div_ = document.createElement("div");
  72.   if (this.visible_) {
  73.     this.show();
  74.   }
  75.  
  76. ...
  77.  
  78. };
  79.        
  80. /**
  81.  * Positions and shows the icon.
  82.  */
  83. ClusterIcon.prototype.show = function () {
  84.   if (this.div_) {
  85.     var pos = this.getPosFromLatLng_(this.center_);
  86.     this.div_.style.cssText = this.createCss(pos);
  87.     if (this.cluster_.printable_) {
  88.      // (Would like to use "width: inherit;" below, but doesn't work with MSIE)
  89.      this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_ + "px;'>" + this.sums_.text + "</div>";
  90.     } else {
  91.      this.div_.innerHTML = this.sums_.text;
  92.     }
  93.     //this.div_.title = this.cluster_.getMarkerClusterer().getTitle();
  94.     // MY SOLUTION BELOW
  95.     this.div_.title = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
  96.     this.div_.style.display = "";
  97.   }
  98.   this.visible_ = true;
  99. };
  100.        
  101. > ClusterIcon.prototype.show =
  102. > function () {   if (this.div_) {
  103. >     var pos = this.getPosFromLatLng_(this.center_);
  104. >     this.div_.style.cssText = this.createCss(pos);
  105. >     if (this.cluster_.printable_) {
  106. >       // (Would like to use "width: inherit;" below, but doesn't work with MSIE)
  107. >       this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_
  108. > + "px;'>" + this.sums_.text + "</div>";
  109. >     } else {
  110. >       this.div_.innerHTML = this.sums_.text;
  111. >     }
  112. >     this.div_.title = **** Your stuff here ***
  113. >     this.div_.style.display = "";   }   this.visible_ = true; };
  114.        
  115. c:Cluster
  116.        
  117. mc:MarkerClusterer
create a new version of this paste RAW Paste Data