Google Maps V3 Label alignment - google-maps

Question

I've created a custom marker in google maps and want to set labels on it (1 & 2), but somehow I cant position it and it always positions wrong:
(source: bilder-upload.eu)
I've already tried setting different anchors, but it seems like they wont move
var t = this,
markerConfig = {
lat: location.data('lat'),
lng: location.data('lng'),
label: location.data('id').toString(), color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(38, 80),
};
t.marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
})
};
I expect it to align to the center of the markers.

Answer 1

To change the position of the label with respect to the marker, use labelOrigin:
labelOrigin
Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
related questions:
How to position the label inside the Marker in Google Map?
Google Maps API, add custom SVG marker with label
Google map label placement
labelOrigin: new google.maps.Point(30, 30) works with your marker (and it looks like the anchor is slightly off, anchor: new google.maps.Point(32, 80), seems to work best.
var markerConfig = {
lat: 12.97,
lng: 77.59,
label: "1",
color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(32, 80),
labelOrigin: new google.maps.Point(30, 30)
};
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 12.97,
lng: 77.59
}
});
var markerConfig = {
lat: 12.97,
lng: 77.59,
label: "1",
color: 'white'
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(32, 80),
labelOrigin: new google.maps.Point(30, 30)
};
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: markerConfig.label,
color: 'red',
},
icon: icon,
});
};
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>