MarkerWithLabel : problem of overlapping labels when two markers are in the same position about google-maps-utility-library-v3

[GoogleCodeExporter]

This problem occurs because both labels have the same zIndex in this situation, 
a zindex which is 1 higher than the zindex shared by the markers. This means 
the two labels appear above BOTH markers, causing visual confusion. The 
solution would involve putting the label's div inside the corresponding marker 
div but this is not possible because Google does not provide an API to return 
the marker div.

I don't have a good workaround for you at present. An easy fix would be 
possible if Google provided a method for returning the div used for placing the 
marker on the map.

Original comment by [email protected] on 18 Aug 2010 at 4:53

[GoogleCodeExporter]

Original comment by [email protected] on 7 Dec 2010 at 8:28

• Changed state: Acknowledged

[GoogleCodeExporter]

Is there any news to this issue? Or has anyone figured out a workaround for it?

Original comment by [email protected] on 13 Feb 2011 at 10:43

[GoogleCodeExporter]

No easy workaround identified. If Google were to provide a method for returning 
the DIV of the parent marker, the problem could very likely be fixed.

Original comment by [email protected] on 14 Feb 2011 at 1:09

[GoogleCodeExporter]

Has a request about a method to return the marker div been filed in 
gmaps-api-issues? ( http://code.google.com/p/gmaps-api-issues/ )

I have looked around there but haven't found anything about this, Maybe a good 
idea would be to file a request?

Original comment by [email protected] on 3 Mar 2011 at 12:36

[GoogleCodeExporter]

An issue has been filed:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3094

Original comment by [email protected] on 3 Mar 2011 at 5:58

[GoogleCodeExporter]

This issue cannot be resolved without an API change from Google.

Original comment by [email protected] on 11 Jul 2011 at 4:38

• Changed state: Confirmed

[GoogleCodeExporter]

does it have any solution by now?

Original comment by [email protected] on 17 Apr 2013 at 8:48

[GoogleCodeExporter]

No resolution yet

Original comment by [email protected] on 18 Apr 2013 at 5:37

[GoogleCodeExporter]

i was thinking in using the zindex and the labelzindex and give values based on 
it up and left positions

ive tested with random values and it seems to work, but i can´t reach the  
exacly formula that would make it possible

Original comment by [email protected] on 18 Apr 2013 at 6:44

[GoogleCodeExporter]

any ideas?

Original comment by [email protected] on 20 Apr 2013 at 9:48

[GoogleCodeExporter]

I have looked at this long and hard and I believe the only solution is as 
indicated in #1 above. i.e., an API change is required so that access to the 
DIV containing the marker.

Original comment by [email protected] on 20 Apr 2013 at 10:12

[GoogleCodeExporter]

ok thanks, i´m gonna look around to see if there is an alternative to 
markerwithlabel

Original comment by [email protected] on 20 Apr 2013 at 11:15

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

As a possible fix you could try setting a z-index and background colour to your 
marker labels. You'll have to set the width of the marker label to match the 
marker itself but gmaps scales it really nicely.

Works well for me.

Original comment by [email protected] on 7 May 2013 at 10:04

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Issue 271 has been merged into this issue.

Original comment by [email protected] on 10 Sep 2013 at 5:56

[GoogleCodeExporter]

Sample Workaround
//off function
var hoverOffset = 80000;

//Marker creation function
          var latLng = new google.maps.LatLng(property.lat, property.lng);
          var newStyle = MAPS_MARKER_LABEL_STYLE;
          newStyle['z-index'] = hoverOffset + 1;
          var marker = new MarkerWithLabel({
            cursor: 'pointer',
            icon: MAPS_SINGLE_CLUSTER_IMAGE,
            id: property.id,
            map: map,
            position: latLng,
            labelContent: 'blahblah',
            labelAnchor: new google.maps.Point(6, 30),
            labelStyle: newStyle
          });
          marker.setZIndex(hoverOffset);
          hoverOffset += 2;
          markers.push(marker);

Original comment by [email protected] on 17 Mar 2014 at 10:07

[GoogleCodeExporter]

Confirming that the solution in #19 seems to work! I did have to tweak the 
formatting to:

var newStyle = hoverOffset + 1;

var marker = new MarkerWithLabel({
labelStyle: {zIndex:newStyle}
});

Original comment by [email protected] on 29 Jul 2014 at 10:06

[GoogleCodeExporter]

I think #19 and #20 doesn't work.
I modified the fiddle from Issue 271: http://jsfiddle.net/waldert/5zxqo3fs/

Any Idea? As is see the google ticket is closed...

Original comment by [email protected] on 8 Aug 2014 at 3:49

[GoogleCodeExporter]

I encountered this issue recently. The work around we used was to set the 
marker pin in the CSS via labelStyle, this is then applied at the same z-index 
as the labelContent. Obviously not a perfect solution but workable, especially 
with the support of CSS background-size.

Original comment by [email protected] on 11 Aug 2014 at 12:34

[GoogleCodeExporter]

I got the same issue. It's really terrible if you have 15 markers close to each 
other. All labels are on the top, even if I give them a different z-index via 
the loop that creates them.

Original comment by [email protected] on 19 Sep 2014 at 1:47

[GoogleCodeExporter]

I was able to work around this issue with the hint of #22.
My marker image is now the background-image of the label class. To fool Google 
Maps to not use the default marker icon additionally, I used a 1x1 transparent 
image as the marker-icon.

Original comment by [email protected] on 19 Sep 2014 at 2:04

[GoogleCodeExporter]

#24 works great! Thanks!

Original comment by [email protected] on 25 Sep 2014 at 11:44

[GoogleCodeExporter]

#22 #24 works but can't use animation on the marker now to show current marker 
:(

Original comment by [email protected] on 7 Jan 2015 at 5:02

[GoogleCodeExporter]

#26 why not? You should be able to use any CSS animation on the "label"-classed 
element.

Original comment by [email protected] on 7 Jan 2015 at 5:10

[GoogleCodeExporter]

I found only one solution: (version 1.10)
instead of 
line 141:
this.getPanes().overlayImage.appendChild(this.labelDiv_);
use this:
this.getPanes().markerLayer.appendChild(this.labelDiv_);

The overlayImage pane is pane which every elements overlay the any element of 
image and marker layer.

Because z-index work only in theier stack context, so any change of z-index 
can't solve this problem. Onle when you add the label and marker image to same 
pane, you can work with z-index.

Currently it's work for me.

Original comment by [email protected] on 20 Feb 2015 at 8:52

[GoogleCodeExporter]

#28 Solves this problem. great work guys. Thank you so much

Original comment by [email protected] on 1 Apr 2015 at 11:25

[GoogleCodeExporter]

I had to combine #19 with #28.. Works now

Original comment by [email protected] on 8 Apr 2015 at 8:24

[GoogleCodeExporter]

#28 worked for me as well, and should be included in the official release 
version

Original comment by [email protected] on 20 Apr 2015 at 1:45

[GoogleCodeExporter]

I confirm #28 works.
I tried using the newest version, modifying the same code at line 77 but labels 
weren't showing.
Version 1.1.10 works perfectly as mentioned.

Original comment by [email protected] on 22 Apr 2015 at 4:03

[GoogleCodeExporter]

oh thank you very much... finally #28 works.. god bless!

Original comment by [email protected] on 23 Apr 2015 at 12:10

[GoogleCodeExporter]

#28 worked, thanks so much :)

Original comment by [email protected] on 5 May 2015 at 8:07

[GoogleCodeExporter]

#28 works. Is it possible to add this to the normal release?

Original comment by [email protected] on 27 May 2015 at 10:47

[GoogleCodeExporter]

I tried both #28 and #19, also together but they dont work.. What did you do 
exactly?
I downloaded the newest version, 1.1.10, changed line 141 from
this.getPanes().overlayImage.appendChild(this.labelDiv_);
to
this.getPanes().markerLayer.appendChild(this.labelDiv_);
but nothing changes. I also added an incremental 'z-index' inside the 
labelStyle but its the same as before..

Original comment by [email protected] on 3 Jun 2015 at 2:54

[GoogleCodeExporter]

#28 WORKS LIKE A CHARM !!!!
Thanks dude!!!! =D

Original comment by [email protected] on 24 Jun 2015 at 9:24

[GoogleCodeExporter]

I'm with #36, this (#28) doesn't seem to work for me. I am still seeing the 
labels overlap.

I downloaded the newest version, 1.1.10, changed line 141 from
this.getPanes().overlayImage.appendChild(this.labelDiv_);
to
this.getPanes().markerLayer.appendChild(this.labelDiv_);

Also tried changing line 145 from:
this.getPanes().overlayImage.appendChild(this.crossDiv_);
to
this.getPanes().markerLayer.appendChild(this.crossDiv_);

Neither fixed the issue. 

I am creating the marker as such:

var marker = new MarkerWithLabel({
                position: new google.maps.LatLng(geoLocation[1],geoLocation[0]),
                title: title,
                id: _id,
                icon: "files/pins/default.png",  
                labelContent: icon.svg,
                labelAnchor: new google.maps.Point(11, 53),
                labelClass: "map-svg-icon",                
            });

Original comment by [email protected] on 5 Jul 2015 at 5:25

[GoogleCodeExporter]

One way of getting around this is to use MarkerClustererPlus.  

Original comment by [email protected] on 16 Jul 2015 at 3:35

[GoogleCodeExporter]

#28 works

Original comment by [email protected] on 16 Jul 2015 at 4:37

[GoogleCodeExporter]

#28 Works. Thank you so much 

Original comment by [email protected] on 31 Jul 2015 at 10:17