MarkerWithLabel : problem of overlapping labels when two markers are in the same position

[GoogleCodeExporter]

please, Looks this attach file.

Browser / Operating System:
all

*********************************************************
Tip: Star this issue (next to title) to receive notifications of status
changes against this issue, also used as a gauge for how many people are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by webacte...@gmail.com on 16 Jul 2010 at 5:08

Attachments:

• markerlabel.png

[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 garylitt...@gmail.com on 18 Aug 2010 at 4:53

[GoogleCodeExporter]

Original comment by garylitt...@gmail.com 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 filip.en...@gmail.com 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 garylitt...@gmail.com 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 filip.en...@gmail.com 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 garylitt...@gmail.com on 3 Mar 2011 at 5:58

[GoogleCodeExporter]

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

Original comment by garylitt...@gmail.com on 11 Jul 2011 at 4:38

• Changed state: Confirmed

[GoogleCodeExporter]

does it have any solution by now?

Original comment by erikrpi...@gmail.com on 17 Apr 2013 at 8:48

[GoogleCodeExporter]

No resolution yet

Original comment by garylitt...@gmail.com 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 erikrpi...@gmail.com on 18 Apr 2013 at 6:44

[GoogleCodeExporter]

any ideas?

Original comment by erikrpi...@gmail.com 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 garylitt...@gmail.com 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 erikrpi...@gmail.com 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 BarryFea...@gmail.com 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 brett.mc...@gmail.com 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 ty...@spacelist.ca 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 kimbodes...@gmail.com 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 thomas.w...@gmail.com 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 ryanan...@gmail.com 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 SumitStu...@gmail.com 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 SumitStu...@gmail.com on 19 Sep 2014 at 2:04

[GoogleCodeExporter]

#24 works great! Thanks!

Original comment by mkor...@mail.ru 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 nikreati...@gmail.com 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 SumitStu...@gmail.com 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 luk.be...@gmail.com on 20 Feb 2015 at 8:52

[GoogleCodeExporter]

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

Original comment by nutchai...@gmail.com on 1 Apr 2015 at 11:25

[GoogleCodeExporter]

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

Original comment by ke...@parkme.com 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 wexas...@googlemail.com 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 saverio....@kettydo.com on 22 Apr 2015 at 4:03

[GoogleCodeExporter]

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

Original comment by unn...@gmail.com on 23 Apr 2015 at 12:10

[GoogleCodeExporter]

#28 worked, thanks so much :)

Original comment by frere.je...@gmail.com on 5 May 2015 at 8:07

[GoogleCodeExporter]

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

Original comment by tzaferis...@gmail.com 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 cristina...@gmail.com on 3 Jun 2015 at 2:54

[GoogleCodeExporter]

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

Original comment by eduatlet...@gmail.com 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 ctclark...@gmail.com on 5 Jul 2015 at 5:25

[GoogleCodeExporter]

One way of getting around this is to use MarkerClustererPlus.  

Original comment by d...@dougcassidy.com on 16 Jul 2015 at 3:35

[GoogleCodeExporter]

#28 works

Original comment by d...@dougcassidy.com on 16 Jul 2015 at 4:37

[GoogleCodeExporter]

#28 Works. Thank you so much 

Original comment by priyanka...@gmail.com on 31 Jul 2015 at 10:17

[GoogleCodeExporter]

Since this issue is 5 years old and no code was commited to this project for a 
year I commited #28 to a fork on github at 
http://github.com/cdaguerre/gmaps-utility-library and registered it on bower as 
gmaps-utility-library

Original comment by cdague...@worldia.com on 18 Aug 2015 at 8:43

[GoogleCodeExporter]

#28 it's Works. Thanks

Original comment by gaurang....@gmail.com on 7 Oct 2015 at 6:06