Comments (42)
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
from google-maps-utility-library-v3.
Original comment by [email protected]
on 7 Dec 2010 at 8:28
- Changed state: Acknowledged
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
does it have any solution by now?
Original comment by [email protected]
on 17 Apr 2013 at 8:48
from google-maps-utility-library-v3.
No resolution yet
Original comment by [email protected]
on 18 Apr 2013 at 5:37
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
any ideas?
Original comment by [email protected]
on 20 Apr 2013 at 9:48
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
[deleted comment]
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
[deleted comment]
from google-maps-utility-library-v3.
[deleted comment]
from google-maps-utility-library-v3.
Issue 271 has been merged into this issue.
Original comment by [email protected]
on 10 Sep 2013 at 5:56
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
#24 works great! Thanks!
Original comment by [email protected]
on 25 Sep 2014 at 11:44
from google-maps-utility-library-v3.
#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
from google-maps-utility-library-v3.
#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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
#28 Solves this problem. great work guys. Thank you so much
Original comment by [email protected]
on 1 Apr 2015 at 11:25
from google-maps-utility-library-v3.
I had to combine #19 with #28.. Works now
Original comment by [email protected]
on 8 Apr 2015 at 8:24
from google-maps-utility-library-v3.
#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
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
oh thank you very much... finally #28 works.. god bless!
Original comment by [email protected]
on 23 Apr 2015 at 12:10
from google-maps-utility-library-v3.
#28 worked, thanks so much :)
Original comment by [email protected]
on 5 May 2015 at 8:07
from google-maps-utility-library-v3.
#28 works. Is it possible to add this to the normal release?
Original comment by [email protected]
on 27 May 2015 at 10:47
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
#28 WORKS LIKE A CHARM !!!!
Thanks dude!!!! =D
Original comment by [email protected]
on 24 Jun 2015 at 9:24
from google-maps-utility-library-v3.
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
from google-maps-utility-library-v3.
One way of getting around this is to use MarkerClustererPlus.
Original comment by [email protected]
on 16 Jul 2015 at 3:35
from google-maps-utility-library-v3.
#28 works
Original comment by [email protected]
on 16 Jul 2015 at 4:37
from google-maps-utility-library-v3.
#28 Works. Thank you so much
Original comment by [email protected]
on 31 Jul 2015 at 10:17
from google-maps-utility-library-v3.
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 [email protected]
on 18 Aug 2015 at 8:43
from google-maps-utility-library-v3.
Related Issues (20)
- White tiles in Chrome
- Add CLASS to IMG in infobubble.js
- MarkerClusterer: ClusterIconStyle - fontFamily and fontWeight not working
- MarkerWithLabel V3, cannot hide marker labels in V 1.1.0 HOT 2
- MarkerWithLabel: labelInBackground property doesn't work HOT 2
- MarkerWithLabel: dom elements inside labelContent HOT 1
- Scrolling on InfoWindow inconsistent between Firefox and Chrome HOT 2
- select tags not working inside richmarkers
- map cluster marker not loaded over https HOT 2
- Rendering issues with accuracy circle
- Ability to change datasets and recluster
- MarkerWithLabel with draggable=false doesn't fire mouseup event when clicking on label
- Markers is not shown properly if it is on same place using marker cluster.
- Retina icons are not rendered correctly by marker clusterer plus
- Broken image m1.png
- Patch for /trunk/infobox/src/infobox.js HOT 1
- Problem in setPosition
- Overlapping Labels
- Transit stations are still not clickable
- setPosition not working* HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from google-maps-utility-library-v3.