Overlays Overlapping but Markers OK

[merb]

Hi

 

I have produced a V3 map containing several markers with overlays. While the markers appear OK, when the markers are close to each other, the overlays are displayed on top of each other (see pic). I have set the zindex on both the marker and overlay so that it goes marker 1 = 1 , label 1 = 2, marker 2 = 3, label 2 = 4 etc, but it does not seem to do what I expect. The page is located here http://www.bestsaltlakehomes.com/subdivisions/sandy.php

 

Here is the code

 

map-v3-1.js

 

// JavaScript code to setup the map
 
 function load(lat,lng) {
         
  var latlng = new google.maps.LatLng(lat,lng); // store the latlng
  
  // setup options for map display
  var myOptions = {
   zoom: 12,
   center: latlng,
   panControl: true,  
   zoomControl: true,  
   mapTypeControl: true,  
   scaleControl: true,  
   streetViewControl: true,  
   overviewMapControl: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  // display map in the subdiv-map div containter
  var map = new google.maps.Map(document.getElementById("subdiv-map"),myOptions); 
         
       
  // setup the location search field and its autocomplete
  var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
 
        autocomplete.bindTo('bounds', map); // only search in the map
 
        var infowindow = new google.maps.InfoWindow();
   
        var marker = new google.maps.Marker({
           map: map
        });
 
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
           infowindow.close();
           var place = autocomplete.getPlace();
           if (place.geometry.viewport) {
             map.fitBounds(place.geometry.viewport);
           } else {
             map.setCenter(place.geometry.location);
             map.setZoom(17);  // Why 17? Because it looks good.
           }
 
           var image = new google.maps.MarkerImage(
               place.icon,
               new google.maps.Size(71, 71),
               new google.maps.Point(0, 0),
               new google.maps.Point(17, 34),
               new google.maps.Size(35, 35));
           marker.setIcon(image);
           marker.setPosition(place.geometry.location);
 
           var address = '';
           if (place.address_components) {
             address = [(place.address_components[0] &&
                 place.address_components[0].short_name || ''),
                    (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                    (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                    ].join(' ');
           }
 
           infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
           infowindow.open(map, marker);
        });
  
  
  // now display the subdivisions on the map
  var image = 'mm_subdiv.png';   
   
  downloadUrl("xml_convert.php", function(data) {
          
   var xml = data.responseXML;         
   var markers = xml.documentElement.getElementsByTagName("marker");         
   var zindex = 1;
   for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("subdivision");                               
    var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
    image = "darkblue.png";
    labelText = 1+i + '';

    /*zindex = Math.round(point.lat()*-100000)<<5 ;*/
    var marker = new google.maps.Marker({      
     position: point,
     //animation: google.maps.Animation.DROP,   
     map: map,      
     title: name,
     zIndex: zindex,
     icon: image
    });
    zindex = zindex + 1;  
    
    var label = new Label({
                 map: map
            });

            label.set('zIndex', zindex);
            label.bindTo('position', marker, 'position');
            label.set('text', labelText);
    zindex = zindex + 1;  
   }
  });       
 } 
 
 function downloadUrl(url, callback) {
       var request = window.ActiveXObject ?
           new ActiveXObject('Microsoft.XMLHTTP') :
           new XMLHttpRequest;
 
       request.onreadystatechange = function() {
         if (request.readyState == 4) {
           request.onreadystatechange = doNothing;
           callback(request, request.status);
         }
       };
 
       request.open('GET', url, true);
       request.send(null);
    }
 
 function doNothing() {}

---------------

 

markerwithlabel-v1.js

 

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
     // Initialization
     this.setValues(opt_options);
 
     // Here go the label styles
     var span = this.span_ = document.createElement('span');
     span.style.cssText = 'position: relative; left: -10px; top: -19px; ' +
                          'white-space: nowrap;color:#ffffff;' +
                          'font-family: Arial; font-weight: bold;' +
                          'font-size: 12px;';
 
     var div = this.div_ = document.createElement('div');
     div.appendChild(span);
     div.style.cssText = 'position: absolute; display: none';
};
 
Label.prototype = new google.maps.OverlayView;
 
Label.prototype.onAdd = function() {
     var pane = this.getPanes().overlayImage;
     pane.appendChild(this.div_);
 
     // Ensures the label is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function() { me.draw(); })
     ];
};
 
// Implement onRemove
Label.prototype.onRemove = function() {
     this.div_.parentNode.removeChild(this.div_);
 
     // Label is removed from the map, stop updating its position/text.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) {
          google.maps.event.removeListener(this.listeners_[i]);
     }
};
 
// Implement draw
Label.prototype.draw = function() {
     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
     div.style.left = position.x + 'px';
     div.style.top = position.y + 'px';
     div.style.display = 'block';
 
     div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
     this.span_.innerHTML = this.get('text').toString();

};

 

-----------------------------------------

 

Any help will be greatly appreciated.

 

P.S. I am new to Javascript so be gentle with me.

 

Thanks

 

Mark

 

[Ralph]

Try this article:-

http://code.google.com/apis/maps/articles/toomanymarkers.html

#Markerclusterer

Ralph

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/vCyYZuGhIFQJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[merb]

Thanks Ralph, clustering with definitely solve the problem by making sure the markers don't overlap, but I am still not sure why numbering the zindex like I have results in overlapping labels. I am after a marker / label, marker / label type of overlay, where at the moment it seems to be showing marker, marker, label, label (i.e. all the labels are displayed on top of the markers, even if the marker is not its parent).

[merb]

Can anybody help me with this?

 

Many Thanks

 

Mark

[xelawho]

I can't really tell from your code (so this may well be useless), but
are your markers and labels getting added to the same pane?

[merb]

Hi

 

The labels use the overlayimage pane, which I believe is the default pane for a marker.

 

This is the code that assigns the label div to the overlayimage pane.

[Ralph]

Not sure but worth looking at this:

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0/docs/reference.html

Ralph

[Rossko]

> The labels use the overlayimage pane, which I believe is the default pane
> for a marker.

Not if they are "optimized", the default option
http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions
and
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/e10577279dd98e56/a020380e7e80e56e