Open GoogleCodeExporter opened 9 years ago
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
Original comment by garylitt...@gmail.com
on 7 Dec 2010 at 8:28
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
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
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
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
This issue cannot be resolved without an API change from Google.
Original comment by garylitt...@gmail.com
on 11 Jul 2011 at 4:38
does it have any solution by now?
Original comment by erikrpi...@gmail.com
on 17 Apr 2013 at 8:48
No resolution yet
Original comment by garylitt...@gmail.com
on 18 Apr 2013 at 5:37
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
any ideas?
Original comment by erikrpi...@gmail.com
on 20 Apr 2013 at 9:48
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
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
[deleted comment]
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
[deleted comment]
[deleted comment]
Issue 271 has been merged into this issue.
Original comment by brett.mc...@gmail.com
on 10 Sep 2013 at 5:56
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
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
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
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
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
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
#24 works great! Thanks!
Original comment by mkor...@mail.ru
on 25 Sep 2014 at 11:44
#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
#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
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
#28 Solves this problem. great work guys. Thank you so much
Original comment by nutchai...@gmail.com
on 1 Apr 2015 at 11:25
I had to combine #19 with #28.. Works now
Original comment by ke...@parkme.com
on 8 Apr 2015 at 8:24
#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
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
oh thank you very much... finally #28 works.. god bless!
Original comment by unn...@gmail.com
on 23 Apr 2015 at 12:10
#28 worked, thanks so much :)
Original comment by frere.je...@gmail.com
on 5 May 2015 at 8:07
#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
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
Original issue reported on code.google.com by
webacte...@gmail.com
on 16 Jul 2010 at 5:08Attachments: