Google map label placement



I have added label in google map. But the label is coming in the middle of the marker. I have tried to add class also but labelClass:"my_label" in the label but class is not getting added. I’m not getting any way to position label.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882,131.044922),
  map: map,
  title:"Hello World!",
  icon: createMarker(25, 25, 4),
  labelClass:"my_label",
  labelAnchor: new google.maps.Point(15, 65),
  label:{
    text: 'My Place',
    color: '#000',
    fontSize:'14px',
    fontWeight:'bold'
  }
});

Fiddle Demo

enter image description here

How in google map labels are positioned side of markers. I want like this.

Answer

To adjust the position of the label, use the google.maps.Icon labelOrigin property:

icon: {
  url: createMarker(25, 25, 4),
  labelOrigin: new google.maps.Point(55, 12)
},

The label is centered, so you will need to compute the correct offset to get it next to the marker (the “x” coordinate).

proof of concept fiddle

screen shot of resulting map

code snippet:

var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 16,
  center: new google.maps.LatLng(-25.363882, 131.044922),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882, 131.044922),
  map: map,
  title: "Hello World!",
  icon: {
    url: createMarker(25, 25, 4),
    labelOrigin: new google.maps.Point(55, 12)
  },
  label: {
    text: 'My Place',
    color: '#000',
    fontSize: '14px',
    fontWeight: 'bold'
  }
});

function createMarker(width, height, radius) {
  var canvas, context;
  canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  context = canvas.getContext("2d");
  context.clearRect(0, 0, width, height);
  context.fillStyle = "rgba(255,255,0,1)";
  context.strokeStyle = "rgba(0,0,0,1)";
  context.beginPath();
  context.moveTo(radius, 0);
  context.lineTo(width - radius, 0);
  context.quadraticCurveTo(width, 0, width, radius);
  context.lineTo(width, height - radius);
  context.quadraticCurveTo(width, height, width - radius, height);
  context.lineTo(radius, height);
  context.quadraticCurveTo(0, height, 0, height - radius);
  context.lineTo(0, radius);
  context.quadraticCurveTo(0, 0, radius, 0);
  context.closePath();
  context.fill();
  context.stroke();
  return canvas.toDataURL();
}
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>


Source: stackoverflow