search

Kurubik / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
0 stars 0 forks source link

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

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
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:

GoogleCodeExporter commented 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

GoogleCodeExporter commented 9 years ago

Original comment by garylitt...@gmail.com on 7 Dec 2010 at 8:28

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
This issue cannot be resolved without an API change from Google.

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

GoogleCodeExporter commented 9 years ago 
does it have any solution by now?

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

GoogleCodeExporter commented 9 years ago 
No resolution yet

Original comment by garylitt...@gmail.com on 18 Apr 2013 at 5:37

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
any ideas?

Original comment by erikrpi...@gmail.com on 20 Apr 2013 at 9:48

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Issue 271 has been merged into this issue.

Original comment by brett.mc...@gmail.com on 10 Sep 2013 at 5:56

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
#24 works great! Thanks!

Original comment by mkor...@mail.ru on 25 Sep 2014 at 11:44

GoogleCodeExporter commented 9 years ago 
#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 commented 9 years ago 
#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 commented 9 years ago 
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 commented 9 years ago 
#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 commented 9 years ago 
I had to combine #19 with #28.. Works now

Original comment by ke...@parkme.com on 8 Apr 2015 at 8:24

GoogleCodeExporter commented 9 years ago 
#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 commented 9 years ago 
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 commented 9 years ago 
oh thank you very much... finally #28 works.. god bless!

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

GoogleCodeExporter commented 9 years ago 
#28 worked, thanks so much :)

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

GoogleCodeExporter commented 9 years ago 
#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 commented 9 years ago 
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 commented 9 years ago 
#28 WORKS LIKE A CHARM !!!!
Thanks dude!!!! =D

Original comment by eduatlet...@gmail.com on 24 Jun 2015 at 9:24