How to add labels to Markers?

Question

How to add labels (with place's name) to Markers?

All the links I found are linked to 404 page.

• From StackOverflow
• Walkthrough's link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/

Answer 1

There is an example of MarkerWithLabel here that should show you how to do that. It's the labelContent property. Transcript of an example from that link:

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: 12,
  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 iw1 = new google.maps.InfoWindow({
  content: "Home For Sale"
});
google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });

Answer 2

I assume this is what you're looking for, the link referenced in the specification is deprecated. As far as I know it only supports one character though.

Answer 3

I found a way using this post https://stackoverflow.com/questions/32680686/google-maps-markerlabel-is-not-a-function

This is a very easy way, but does not display the label underneath the marker as nice as the staff solution. It displays on top of the marker.

Just add the label object to your marker instance, seen below, with the text you want to appear and a label will be created.

var marker = new google.maps.Marker({
        position: { lat: place.latitude, lng: place.longitude },
        title: `${place.place_name}, ${place.admin_code1}`,
        label: {
            text: `${place.place_name}, ${place.admin_code1}`
        }
    })