1

I have multiple markers on a Google Map with a custom icon. The marker represents a number of items in that region. I have added an infobox which serves as a label of how many items are in that region.

The infobox uses the floatpane to move with the marker when the map is dragged.

The problem is that I found a comment on this question that mentions that the markers and the infoboxes are on different panes and so the infobox displays over all the markers. I would prefer it to be one the same level as its associated marker.

enter image description here

var labelText = '<div style="color: #000000"><b>'+ someTitle +'</b></div>';

var myOptions = {
    content: labelText,
    boxStyle: {
       textAlign: "center",
       fontSize: "8pt",
       width: "90px"
    },
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-45, someOffsetY),
    position: calculatedCenterPosition,
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "floatPane"
};
var label = new InfoBox(myOptions);
label.open(map, gmarker);

Has anyone dealt with this issue yet? How can it be solved?

Community
  • 1
  • 1
sim1
  • 457
  • 1
  • 7
  • 26
  • Have you looked at [MarkerWithLabel](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/)? – geocodezip Jan 29 '16 at 14:17
  • @geocodezip, I have, but I assumed one could only label the marker with a character? The label needs to be in the position it is as shown in the figure and represent the number of items in that area. – sim1 Jan 31 '16 at 14:51
  • Why do you think a [MarkerWithLabel](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/) only allows one character? [The "basic" example has multiple characters](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/examples/basic.html). Related question: [Google maps Marker Label with multiple characters](http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters) – geocodezip Jan 31 '16 at 17:58
  • @geocodezip, will you please include your comment as an answer to this question. I replaced the infobox with the markerwithlabel and it displays much better, so I would like to mark your answer as correct for this question. Thanks so much for the comments and hint - it directed me to an alternative solution. – sim1 Feb 01 '16 at 23:31

2 Answers2

1

You can use MarkerWithLabel

The "basic" example has multiple characters. Related question: Google maps Marker Label with multiple characters

code snippet:

 function initMap() {
   var latLng = new google.maps.LatLng(49.47805, -123.84716);
   var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

   var map = new google.maps.Map(document.getElementById('map_canvas'), {
     zoom: 13,
     center: latLng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   var marker1 = new MarkerWithLabel({
     position: homeLatLng,
     draggable: true,
     raiseOnDrag: true,
     map: map,
     labelContent: "$425K",
     labelAnchor: new google.maps.Point(22, 0),
     labelClass: "labels", // the CSS class for the label
     labelStyle: {
       opacity: 0.75
     }
   });

   var marker2 = new MarkerWithLabel({
     position: new google.maps.LatLng(49.475, -123.84),
     draggable: true,
     raiseOnDrag: true,
     map: map,
     labelContent: "$395K",
     labelAnchor: new google.maps.Point(22, 0),
     labelClass: "labels", // the CSS class for the label
     labelStyle: {
       opacity: 1.0
     }
   });

   var iw1 = new google.maps.InfoWindow({
     content: "Home For Sale"
   });
   var iw2 = new google.maps.InfoWindow({
     content: "Another Home For Sale"
   });
   google.maps.event.addListener(marker1, "click", function(e) {
     iw1.open(map, this);
   });
   google.maps.event.addListener(marker2, "click", function(e) {
     iw2.open(map, this);
   });
 }
 google.maps.event.addDomListener(window, 'load', initMap);
.labels {
  color: red;
  background-color: white;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 40px;
  border: 2px solid black;
  white-space: nowrap;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
Community
  • 1
  • 1
geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Thanks for the help @geocodezip! Does this label work with google.maps.Circle as a marker? – sim1 Feb 02 '16 at 07:32
0

For people like me who finds this 2021.

Setting an increasing/decreasing zIndex on the markers will solve this problem. (depending on what marker you want on top)

phastari
  • 81
  • 1
  • 2