Abhilash Abhilash - 1 month ago 73
Javascript Question

showing multiple characters in google map marker

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

Answer

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>