How can I show the label / title for the marker constantly in Google Maps V3

Question

I want to display markers on a Google map with the title displayed below them, as shown in the image.

Now I read it in v2 using ELabel, but it is deprecated in v3. Is there a way to show text under marker icons in Google Maps V3?

Answer 1

I found the solution in another post that worked fine for me.

Add a numbering label to a Google map marker

Answer 2

Starting in October 2016, the official API provides the ability to add constantly visible labels with a length of more than one letter. See this answer from a Google contributor .

var m = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), label: 'Hello world', }); 

By default, the result looks like this:

Pretty unreadable. Fortunately, the API also allows MarkerLabel instead of a simple line:

 var m = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), label: { color: 'white', fontWeight: 'bold', text: 'Hello world', }, }); 

The snippet above gives the following result:

However, the original question asked if the label could be located below the marker. MarkerLabel notes mention that this is possible with the custom icon and the labelOrigin property. If we want to use the default icon, then

Pretty good! However, this whole approach has a drawback that does not have in the field of the original question: readability with each type of card. If the map type is changed from satellite to the default value, the resulting label is difficult to read:

An easy but not ideal way to avoid low contrast in both types is to set color: 'gray' :

However, the gray color fails near urban areas. A better option would be to use the CSS text-shadow property to draw black linings for white text. However, I cannot find a way to apply the property to labels, because several DOM elements created by Google Maps define the class:

The best option I came up with is to detect changes in map type and label color for each marker:

 map.addListener('maptypeid_changed', function () { var typeToColor, type, color, k, label; typeToColor = { 'terrain': 'black', 'roadmap': 'black', 'hybrid': 'white', 'satellite': 'white', }; type = map.getMapTypeId(); color = typeToColor[type]; for (k in markers) { if (markers.hasOwnProperty(k)) { label = markers[k].getLabel(); label.color = color; markers[k].setLabel(label); } } }); 

However, even this would not work on snowy or cloudy satellite imagery. I think he is still good enough in most cases. However, it’s nice to be able to display visible shortcuts with the official API without any plugins :)

Answer 3

I am using the following:

MarkerWithLabel.js

(image is only flag.png file)

Using javascript in my X.html document

it looks something like this.

  <style type="text/css"> .labels { color: black; background-color: white; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 0.8em; font-weight: bold; text-align: center; width: 6em; border: 1px solid black; white-space: normal; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=true"></script> <!--MarkerwithLabelClass - adjust the path!! --> <script src="YourPathHere/markerwithlabel.js"></script> <script type="text/javascript"> //insert standaard initializing of googlemaps here //and other windows.onload function window.onload = function Initialize() { var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){ var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string) var marker = new MarkerWithLabel({ zIndex: 1, title: titel, position: latlng, draggable: false, icon: image, labelContent: label, labelAnchor: new google.maps.Point(30, -2), labelClass: "labels", // the CSS class for the label labelStyle: { opacity: 0.80 } }); return marker; } </script> 

Check out the license information for the Google Maps API here: https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Answer 4

You can not! But there is another part of the map API that you can use to have a constant display text attached to your markers (without any third-party component), it was called infoWindow. Take a look at this for sample code and see it in action: https://developers.google.com/maps/documentation/javascript/examples/event-closure

If you dare to use third-party code, then here is something that is closer to the look and feel: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Answer 5

You should use the same principle as in this example . Instead of listening to mouse events, you should create a new custom control for each marker, and then place it below the marker. Hope this works.