Status Update
No update yet.
Comments
vt...@google.com
Since the attached screenshot does not allow us to see what is going on under the hood, we need additonal information (code sample) to reproduce the issue.
Meanwhile, check these two links to see if they address your issue:
https://github.com/jawj/OverlappingMarkerSpiderfier
https://github.com/Leaflet/Leaflet.label/issues/45
Meanwhile, check these two links to see if they address your issue:
ga...@gmail.com
Sample code:
<!DOCTYPE html>
<html>
<head>
<title>Bug</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp "></script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12
,center: new google.maps.LatLng(49.48104, -123.87753)
});
var m1 = new google.maps.Marker({
position: new google.maps.LatLng(49.48104, -123.87753),
icon: {
path: "M-6,0a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M 10 -10 H 52 V 10 H 10 z"
,fillColor: "red"
,fillOpacity: 1.0
,strokeColor: "white"
,strokeWeight: 2
,scale: 1
,labelOrigin: new google.maps.Point(31, 1)
},
label: {
text: "$873"
},
map: map
});
var m2 = new google.maps.Marker({
position: new google.maps.LatLng(49.48104, -123.87453),
icon: {
path: "M-6,0a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M 10 -10 H 52 V 10 H 10 z"
,fillColor: "red"
,fillOpacity: 1.0
,strokeColor: "white"
,strokeWeight: 2
,scale: 1
,labelOrigin: new google.maps.Point(31, 1)
},
label: {
text: "$612"
},
map: map
});
}
</script>
</head>
<body onload="initMap()">
<ul>
<li>BUG: Labels appear over both markers when the markers have the same latitude (i.e., the same vertical position on the screen) and are close to one another
<li>As you zoom out the map, you will see the labels more clearly
</ul>
<div id="map" style="height: 400px; width: 100%;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bug</title>
<script src="
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12
,center: new google.maps.LatLng(49.48104, -123.87753)
});
var m1 = new google.maps.Marker({
position: new google.maps.LatLng(49.48104, -123.87753),
icon: {
path: "M-6,0a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M 10 -10 H 52 V 10 H 10 z"
,fillColor: "red"
,fillOpacity: 1.0
,strokeColor: "white"
,strokeWeight: 2
,scale: 1
,labelOrigin: new google.maps.Point(31, 1)
},
label: {
text: "$873"
},
map: map
});
var m2 = new google.maps.Marker({
position: new google.maps.LatLng(49.48104, -123.87453),
icon: {
path: "M-6,0a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M 10 -10 H 52 V 10 H 10 z"
,fillColor: "red"
,fillOpacity: 1.0
,strokeColor: "white"
,strokeWeight: 2
,scale: 1
,labelOrigin: new google.maps.Point(31, 1)
},
label: {
text: "$612"
},
map: map
});
}
</script>
</head>
<body onload="initMap()">
<ul>
<li>BUG: Labels appear over both markers when the markers have the same latitude (i.e., the same vertical position on the screen) and are close to one another
<li>As you zoom out the map, you will see the labels more clearly
</ul>
<div id="map" style="height: 400px; width: 100%;"></div>
</body>
</html>
ga...@gmail.com
This is not a duplicate of 35827304.
st...@google.com
Perhaps this is a dupe of
Description
It shows two markers with labels (attached with setLabel().
The two markers in the centre have the same latitude but slightly different longitudes so they overlap.
The basic portion of one marker overlaps the other and obscures the lower label as you would expect.
BUG: But both labels appear above both markers, so the label becomes unreadable.
Expected behaviour: the label for the frontmost marker should appear on top and the label for the marker in the background should be drawn underneath the front marker and partially obscured by it.