showing multiple characters in google map marker

Question

I have implemented google marker and i want to show a name inside the marker. I tried to change the label: as below code but its only showing the first character.. Could someone tell me how to fix this?

Here is the code from google for the marker

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: "lets showthis",
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Link to the google maps

possible duplicate of [Google maps Marker Label with multiple characters](http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters) — geocodezip, Dec 02 '15 at 14:19

geocodezip · Accepted Answer · 2016-10-15T15:36:32.540

The google.maps.Marker label is a single character.

The documentation clearly states this:

MarkerLabel object specification

google.maps.MarkerLabel object specification

These options specify the appearance of a marker label. A marker label is a single character of text which will appear inside the marker. If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class.

text | Type: string The text to be displayed in the label. Only the first character of this string will be shown.

If you want more than one character (at least for now, there is an open feature request to make that number larger), you need to use a third party library like MarkerWithLabel.

example fiddle

code snippet:

function initialize() {
  var bangalore = {
    lat: 12.97,
    lng: 77.59
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new MarkerWithLabel({
    position: location,
    labelContent: "lets showthis",
    map: map,
    labelAnchor: new google.maps.Point(35, 120),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false,
    icon: pinSymbol('red')
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

// creates an SVG marker in the teardrop shape of the "normal" marker
function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 4
  };
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.labels {
  color: black;
  background-color: red;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  text-align: center;
  width: 70px;
  white-space: nowrap;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>

Thanks for the answer. This works.. But i think it would be better if the text is embedded into the marker instead of position it by css and pointer... so that it will resize as per the text size. Is there any way to achieve this?? — Abhilash, Dec 02 '15 at 16:50
But when I'm trying to remove a marker by marker.setMap(null), I'm getting error that this.label does not support setMap method. Is there some other way to remove this marker from the map ? — DotNet Fan, Jan 26 '16 at 11:09
That is another question. But you might look for an updated version of [MarkerWithLabel](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/), [toggling the marker works in the fiddle in my answer](http://jsfiddle.net/wjv4f7pk/3/) — geocodezip, Jan 26 '16 at 17:58
markerwithlabel http://googlecode.com link is no longer working, alternate link is https://rawgit.com/nmccready/google-maps-utility-library-v3-markerwithlabel/master/dist/markerwithlabel.js — Shoaib Iqbal, May 23 '16 at 09:59
Changed links from turned off googlecode repository to use the github repository through cdn.rawgit.com — geocodezip, Oct 15 '16 at 15:37

showing multiple characters in google map marker

1 Answers1